Payment Request Button

The Apple Pay / Google Pay button element. Renders one native button per available wallet, side by side, into the mount target.

Construct via frame.createElement('paymentRequestButton', { paymentRequest }) — do not call the constructor directly. Always call paymentRequest.canMakePayment() and attach a paymentmethod listener on the payment request before mounting.

EXAMPLE

import Frame from '@framepayments/frame-js';

const frame = await Frame.init('pk_test_...');
const paymentRequest = frame.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: { label: 'T-shirt', amount: 2500 },
});

paymentRequest.on('paymentmethod', async (event) => {
  // confirm with your backend, then:
  await event.complete({ status: 'success' });
});

const button = await frame.createElement('paymentRequestButton', { paymentRequest });
await paymentRequest.canMakePayment();
await button.mount('#wallet-button');

Element options

buttonHeightnumberoptional

Button height in pixels. Defaults to 40.

buttonThemeButtonThemeoptional

Per-wallet button color and style.

buttonTypeButtonTypeoptional

Per-wallet button label (e.g. 'buy', 'checkout', 'donate').

paymentRequestPaymentRequestObjectoptional

The payment request driving this button. Create one via frame.paymentRequest(...) and attach event listeners (at minimum paymentmethod) before mounting.

Methods

PaymentRequestObject

Drives the Apple Pay / Google Pay sheet for a single checkout. Create one via frame.paymentRequest(...), attach event listeners (at minimum paymentmethod), then pass it to frame.createElement('paymentRequestButton').

One payment request object backs one button render. After show() resolves or the customer cancels, the underlying state resets — you can reuse the object for the next checkout.

EXAMPLE

import Frame from '@framepayments/frame-js';

const frame = await Frame.init('pk_test_...');
const paymentRequest = frame.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: { label: 'T-shirt', amount: 2500 },
  requestPayerEmail: true,
});

paymentRequest.on('paymentmethod', async (event) => {
  const { paymentMethod } = event;
  // confirm the charge with your backend, then:
  await event.complete({ status: 'success' });
});

paymentRequest.on('cancel', () => {
  // customer dismissed the wallet sheet
});