> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallets

> Apple Pay and Google Pay with a unified options shape.

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

```html theme={null}
<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:

```javascript theme={null}
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:

```javascript theme={null}
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

```javascript theme={null}
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](/payment-elements/events/on-click)).
* `onExit`: fires when the shopper dismisses the sheet without paying.

## Inside Checkout

Configure wallets the same way inside Checkout:

```javascript theme={null}
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

<CardGroup cols={2}>
  <Card title="Best practices" href="/payment-elements/elements/payment-methods/wallets/best-practices">
    Availability, ordering, and CSP.
  </Card>

  <Card title="Reference" href="/payment-elements/elements/payment-methods/wallets/reference">
    Shared and per-provider options.
  </Card>

  <Card title="Apple Pay" href="/payment-elements/elements/payment-methods/wallets/apple-pay">
    Apple-specific button and requirements.
  </Card>

  <Card title="Google Pay" href="/payment-elements/elements/payment-methods/wallets/google-pay">
    Google-specific button and requirements.
  </Card>
</CardGroup>