Before you start

This guide assumes that you know how to

Accept payments with Apple Pay

Prepare the client session

Apple Pay requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).

Parameter NameRequiredDescription
3-letter currency code in ISO 4217 format, e.g. USD for US dollars
  1. order
Details of the line items of the order
  1. order
The country in which the order is created
  1. paymentMethod
  2. options
  3. APPLE_PAY

For payments using the Apple Pay payment method, use this field to override the default merchant name for the Primer account from showing on the Apple Pay flow. For example, if your merchant name on your account is "Company X" but you want to display a specific store name on the Apple Pay flow, you can set the merchantName to "Store name A".

Prepare the SDK for payments

Show Universal Checkout

Apple Pay is automatically presented to the customer when calling Primer.showUniversalCheckout.

1234567891011
try {  await Primer.showUniversalCheckout(clientToken, {    container: '#checkout-container',    options,    onCheckoutComplete({ payment }) {      console.log('Checkout complete.', payment)    },  })} catch (e) {  // handle error}
typescript
copy

Customization

Check the Customization Guide to learn how to customize payment method buttons.

Additionally, you can style the Apple Pay button by passing the following options:

1234567
const options = {    /* Other options... */    applePay: {        buttonType: 'plain', // 'plain' (default) | 'buy' | 'set-up' | 'donate' | 'check-out' | 'book' | 'subscribe'        buttonStyle: 'black', // 'black' (default) | 'white' | 'white-outline',    }}
typescript
copy
Capture billing address

By default, Apple Pay does not capture the user's billing address.

You can ask to capture the billing address by setting the option captureBillingAddress. The billing address is added to the client session before the payment is made.

123456
const options = {    /* Other options... */    applePay: {        captureBillingAddress: true,    }}
typescript
copy

Limitations

  • Apple Pay is only supported on Apple Devices and Safari Browser. For more info take a look at the Apple support page.
  • Until iOS 16, Apple Pay does not appear on in-app webviews.
  • Apple Pay only appears if the website is using HTTPS.
  • Our current implementation of Apple Pay does not support the card networks mir, girocard, bancomat, and bancontact.

Troubleshooting

Apple Pay button is not presented

If the Apple Pay button is not presented, check that:

  • The browser is Safari
  • The website is using HTTPS
  • The domain has been registered in the Dashboard
  • The order details and country code have been passed to the client session

Test

Check out Apple Pay's Sandbox Testing guide to make payments with Apple Pay on sandbox.

Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.