PayFrame

The styled slot your payment provider fills. Veneer never draws card fields itself.

SourcePackage @kerf-js/veneer

Preview

tsx

import { PayFrame } from '@kerf-js/veneer'export function TestMode() {  return (  <PayFrame    title="Card fields from your payment provider"    testMode    ready    mount={providerFields}  />  )}const providerFields = (el: HTMLElement) => {  const fields = el.ownerDocument.createElement('p')  fields.textContent =    'Your payment provider mounts its fields here.'  el.append(fields)  return { destroy: () => fields.remove() }}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { PayFrame } from '@kerf-js/veneer'<PayFrame  title="Card fields from your payment provider"  testMode  ready  mount={providerFields}/>

Loading

It shimmers until ready, or until a src frame has loaded.

tsx

import { PayFrame } from '@kerf-js/veneer'export function Loading() {  return (  <PayFrame    title={[      'Card fields from your ',      'payment provider',    ].join('')}  />  )}

Accessibility

title names what is inside, for screen readers.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The iframe's title: what's inside it, for a screen reader.
`src`	`string`	—	The provider's hosted page.
`mount`	`((el: HTMLElement, appearance: ProviderAppearance) => { destroy(): void;…`	—	Or mount the provider's fields here, with Veneer's tokens for its appearance API.
`testMode`	`boolean`	`false`	Shows a Test mode badge.
`ready`	`boolean`	`false`	Ready once the provider says so; a `src` frame also flips on its load event.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="pay-frame"] [data-part="head"]

headslot

RelatedCheckout Payment methods