Wallets

The applePay and googlePay elements render a wallet button. Clicking the button opens the shopper’s native wallet sheet; the sheet returns a tokenized payload that the SDK forwards to your onSubmit handler. Both wallets share a common options surface (transaction, require), plus a per-provider block for button styling and provider-specific escape hatches.

Standalone example

<div id="apple"></div>

<script>
  const overflow = new Overflow('live_pub_...');

  const apple = overflow.applePay({
    transaction: { amount: 4999, currency: 'USD', countryCode: 'US', label: 'Order total' },
    require: { email: true, billingAddress: true },
  });

  apple.on('onSubmit', ({ value }) => {
    fetch('/api/authorize', {
      method: 'POST',
      body: JSON.stringify({ method: 'applePay', applePay: value }),
    });
  });

  apple.mount('#apple');
</script>

Use overflow.googlePay(...) with the same shape for Google Pay.

Availability

Wallets require:

HTTPS. Apple Pay does not render on http:// origins.
A supported device and browser. Apple Pay renders on Safari (macOS and iOS) and on Chromium browsers via QR handoff. Google Pay renders on Chromium-based browsers.
A configured merchant. Wallets that lack merchant configuration are hidden without shifting siblings.

Listen for availability changes via onReady. When a wallet is unavailable, it does not render.

Unified `transaction`

Both wallets accept the same transaction shape:

overflow.applePay({
  transaction: {
    amount: 4999,           // minor units (cents for USD)
    currency: 'USD',
    countryCode: 'US',
    label: 'Order total',
    lineItems: [
      { label: 'Subtotal', amount: 4500 },
      { label: 'Tax', amount: 499 },
    ],
  },
});

Amounts are minor units (e.g. cents). The label appears above the total inside the sheet.

Unified `require`

Ask the sheet to collect additional shopper data:

overflow.applePay({
  require: {
    name: true,
    email: true,
    phone: true,
    billingAddress: true,
    shippingAddress: true,
  },
});

Fields you require appear inside the wallet sheet; the shopper cannot skip them. Collected values arrive on the onSubmit value envelope.

Submitted value

apple.on('onSubmit', ({ value }) => {
  // value.paymentToken:      Tokenized wallet payload to forward server-side.
  // value.brand?:            Card brand extracted from the wallet payload.
  // value.last4?:            Last four digits.
  // value.contact?:          Fields collected in the sheet (email, name, phone).
  // value.billingAddress?:   When `require.billingAddress: true`.
  // value.shippingAddress?:  When `require.shippingAddress: true`.
});

Forward value to your server to authorize the charge.

Events

Wallets emit the standard element events plus:

onClick: fires when the shopper clicks the wallet button, before the sheet opens. Use it to gate the sheet on your own preconditions (see onClick).
onExit: fires when the shopper dismisses the sheet without paying.

Inside Checkout

Configure wallets the same way inside Checkout:

overflow.checkout({
  paymentMethods: ['applePay', 'googlePay', 'card', 'bank'],
  applePay: {
    transaction: { amount: 4999, currency: 'USD', countryCode: 'US', label: 'Total' },
    require: { billingAddress: true },
  },
  googlePay: {
    transaction: { amount: 4999, currency: 'USD', countryCode: 'US', label: 'Total' },
    require: { billingAddress: true },
  },
});

Next steps

Best practices

Availability, ordering, and CSP.

Reference

Shared and per-provider options.

Apple Pay

Apple-specific button and requirements.

Google Pay

Google-specific button and requirements.

Get started

Elements

Options

Events

Theming

Guides

Standalone example

Availability

Unified `transaction`

Unified `require`

Submitted value

Events

Inside Checkout

Next steps

Best practices

Reference

Apple Pay

Google Pay

​Standalone example

​Availability

​Unified transaction

​Unified require

​Submitted value

​Events

​Inside Checkout

​Next steps

Best practices

Reference

Apple Pay

Google Pay

Standalone example

Availability

Unified `transaction`

Unified `require`

Submitted value

Events

Inside Checkout

Next steps