> ## 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.

# Apple Pay

> Apple-specific button styling, requirements, and recurring payments.

Apple Pay uses the shared wallet options described in [Wallets](/payment-elements/elements/payment-methods/wallets/introduction) plus a few Apple-only extras.

## Example

```javascript theme={null}
const apple = overflow.applePay({
  buttonType: 'plain',
  buttonStyle: 'black',
  transaction: {
    amount: 4999,
    currency: 'USD',
    countryCode: 'US',
    label: 'Order total',
  },
  require: { email: true, billingAddress: true },
});

apple.mount('#apple');
```

## Availability

Apple Pay renders on Safari (macOS and iOS). On Chromium browsers, the sheet is delivered via a QR handoff to a supported Apple device; control the presentation with `renderApplePayCodeAs`.

Apple Pay requires HTTPS. It does not render on `http://` origins.

## `buttonType` and `buttonStyle`

Match your surrounding UI:

```javascript theme={null}
overflow.applePay({
  buttonType: 'plain',    // 'plain' | 'buy' | 'donate' | ...
  buttonStyle: 'black',   // 'black' | 'white' | 'white-outline'
});
```

Use `'plain'` when the surrounding CTA already describes the action ("Pay with"). Use `'buy'` on ecommerce checkouts.

## Chromium QR handoff

On Chromium, tapping the Apple Pay button opens a QR code the shopper scans with a nearby Apple device. Pick where the code renders:

```javascript theme={null}
overflow.applePay({
  renderApplePayCodeAs: 'modal',  // 'modal' | 'window' (default 'modal')
});
```

`'window'` opens a new browser window; `'modal'` renders in-page. Modal is generally the better default because it stays inside your checkout container.

## `supportedNetworks`

Restrict the card networks Apple presents inside the sheet:

```javascript theme={null}
overflow.applePay({
  supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
});
```

Omit the option to accept every network your merchant configuration supports.

## Recurring payments

Attach a recurring payment request to display subscription copy inside the sheet:

```javascript theme={null}
overflow.applePay({
  recurringPaymentRequest: {
    paymentDescription: 'Monthly plan',
    regularBilling: {
      label: 'Monthly plan',
      amount: '9.99',
      paymentTiming: 'recurring',
      recurringPaymentIntervalUnit: 'month',
    },
    managementURL: 'https://example.com/subscriptions',
  },
});
```

Google Pay does not surface a comparable option; the field is Apple-only.

## Requirements escape hatch

Override the derived contact-fields arrays when `require` does not cover your case:

```javascript theme={null}
overflow.applePay({
  require: { name: true, phone: true },
  requirements: {
    requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'phoneticName'],
  },
});
```

When `requiredBillingContactFields` or `requiredShippingContactFields` is set, it fully replaces the array derived from `require`.

## Shipping methods

Pass shipping methods verbatim under `requirements.shippingMethods` when you want the shopper to pick a shipping option inside the sheet. Refer to Apple's platform documentation for the shape.

## See also

* [Wallets introduction](/payment-elements/elements/payment-methods/wallets/introduction)
* [Wallets reference](/payment-elements/elements/payment-methods/wallets/reference)