PayFrame

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

SourcePackage @weft-js/warp

Preview

tsx

import { PayFrame } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { PayFrame } from '@weft-js/warp'<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 '@weft-js/warp'export function Loading() {  return (    <PayFrame title="Card fields from your payment provider" />  )}

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 warp'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