Skip to content
rdlabo.dev
日本語

ApplePay

Apple Pay confirms a PaymentIntent in one presentation.

https://stripe.com/docs/apple-payhttps://stripe.com/docs/apple-pay

Image from Gyazo

Platform support

Platform Apple Pay
iOS Native STPApplePayContext
Android Not implemented
Web Payment Request Button (stripe-pwa-elements)

updateApplePaySheet and shipping contact updates run on iOS only. Web throws unimplemented for updateApplePaySheet. Android rejects isApplePayAvailable, createApplePay, and presentApplePay.

Prepare settings

  • Register an Apple Merchant ID
  • Create an Apple Pay certificate
  • Enable Apple Pay in Xcode

https://stripe.com/docs/apple-pay#merchantidhttps://stripe.com/docs/apple-pay#merchantid

createApplePay merchantIdentifier must be the same merchant ID registered in the Apple Developer account and Xcode. Do not pass merchantDisplayName here; that option belongs to PaymentSheet and PaymentFlow.

1. isApplePayAvailable

Check the device before you create a request. The promise resolves when Apple Pay is available and rejects otherwise.

import { ApplePayEventsEnum, Stripe } from '@capacitor-community/stripe';

try {
  await Stripe.isApplePayAvailable();
} catch {
  return;
}

method isApplePayAvailable()

Resolves when Apple Pay is available and rejects when it is unavailable.
Apple Pay is supported on iOS and compatible web browsers, not Android.

isApplePayAvailable() => Promise<void>

2. createApplePay

Fetch a PaymentIntent client secret from your backend. See Server Integration. Then pass paymentIntentClientSecret, paymentSummaryItems, merchantIdentifier, countryCode, and currency.

import { firstValueFrom } from 'rxjs';

const { paymentIntent } = await firstValueFrom(
  this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'intent', {}),
);

await Stripe.createApplePay({
  paymentIntentClientSecret: paymentIntent,
  paymentSummaryItems: [{
    label: 'Product Name',
    amount: 1099.00
  }],
  merchantIdentifier: 'merchant.com.getcapacitor.stripe',
  countryCode: 'US',
  currency: 'USD',
});

method createApplePay(...)

Creates an Apple Pay request. Call this before presentApplePay().

createApplePay(options: CreateApplePayOption) => Promise<void>

interface CreateApplePayOption

Prop Type Description Since
paymentIntentClientSecret string Client secret of the PaymentIntent to confirm with Apple Pay. 3.1.0
paymentSummaryItems PaymentSummaryItem[] Line items displayed in the Apple Pay sheet. 3.1.0
merchantIdentifier string Apple merchant identifier configured for the app. 3.1.0
countryCode string Two-letter ISO 3166-1 country code for the payment request. 3.1.0
currency string Three-letter ISO 4217 currency code for the payment request. 3.1.0
requiredShippingContactFields ('postalAddress' | 'phoneNumber' | 'emailAddress' | 'name')[] Shipping contact fields Apple Pay must collect. iOS only. 4.1.0
allowedCountries string[] Two-letter country codes accepted for shipping. iOS only. 5.4.3
allowedCountriesErrorDescription string Message shown when the selected shipping country is not allowed. iOS only. 5.4.3

requiredShippingContactFields asks Apple Pay for postal address, phone, email, or name. allowedCountries rejects shipping countries that are not in the list.

3. presentApplePay

const result = await Stripe.presentApplePay();
if (result.paymentResult === ApplePayEventsEnum.Completed) {
  // Update UI only. Confirm the Intent with a webhook before fulfilling.
}

method presentApplePay()

Presents the Apple Pay request created by createApplePay().

presentApplePay() => Promise<{ paymentResult: ApplePayResultInterface; }>

type alias ApplePayResultInterface

ApplePayEventsEnum.Completed | ApplePayEventsEnum.Canceled | ApplePayEventsEnum.Failed | ApplePayEventsEnum.DidSelectShippingContact | ApplePayEventsEnum.DidCreatePaymentMethod

Treat Canceled as cancellation and Failed as an error.

4. addListener

Register listeners at application startup. See Event Listeners.

Stripe.addListener(ApplePayEventsEnum.Completed, () => {
  console.log('ApplePayEventsEnum.Completed');
});

enum ApplePayEventsEnum

Member Value
Loaded 'applePayLoaded'
FailedToLoad 'applePayFailedToLoad'
Completed 'applePayCompleted'
Canceled 'applePayCanceled'
Failed 'applePayFailed'
DidSelectShippingContact 'applePayDidSelectShippingContact'
DidCreatePaymentMethod 'applePayDidCreatePaymentMethod'

5. updateApplePaySheet

On iOS, DidSelectShippingContact includes contact and updateId. Recalculate totals and call updateApplePaySheet with that updateId. If JavaScript does not respond, the native sheet falls back to the original summary items after 25 seconds.

Stripe.addListener(ApplePayEventsEnum.DidSelectShippingContact, async (data) => {
  await Stripe.updateApplePaySheet({
    updateId: data.updateId,
    paymentSummaryItems: [
      { label: 'Product Name', amount: 1099.00 },
      { label: 'Shipping', amount: 500.00 },
      { label: 'Total', amount: 1599.00 },
    ],
  });
});

method updateApplePaySheet(...)

Updates the native Apple Pay sheet after a shipping-contact callback.
iOS only; this method is not supported on web.

updateApplePaySheet(options: UpdateApplePaySheetOption) => Promise<void>

interface DidSelectShippingContact

Apple Pay shipping-contact data.

Prop Type Description Since
contact ShippingContact Shipping contact selected in Apple Pay. 4.1.0
updateId string Identifier passed to updateApplePaySheet() for this callback. 4.1.0

interface PaymentSummaryItem

Prop Type Description Since
label string Label shown for the line item in the Apple Pay sheet. 3.1.0
amount number Decimal amount in the currency's major unit, for example 10.99. 3.1.0

DidCreatePaymentMethod includes the shipping contact after Apple creates the payment method. Apple does not return the full address until a successful payment.

interface DidCreatePaymentMethod

Prop Type Description Since
contact ShippingContact Contact attached to the Apple Pay payment method. 4.1.0

interface ShippingContact

Prop Type Description Since
givenName string Contact's given name. Apple Pay only. 4.1.0
familyName string Contact's family name. Apple Pay only. 4.1.0
middleName string Contact's middle name. Apple Pay only. 4.1.0
namePrefix string Contact's name prefix. Apple Pay only. 4.1.0
nameSuffix string Contact's name suffix. Apple Pay only. 4.1.0
nameFormatted string Contact's formatted full name. Apple Pay only. 4.1.0
phoneNumber string Contact's phone number. Apple Pay only. 4.1.0
nickname string Contact's nickname. Apple Pay only. 4.1.0
street string Street component of the contact's postal address. Apple Pay only. 4.1.0
city string City component of the contact's postal address. Apple Pay only. 4.1.0
state string State or province component of the contact's postal address. Apple Pay only. 4.1.0
postalCode string Postal-code component of the contact's address. Apple Pay only. 4.1.0
country string Country or region name in the contact's address. Apple Pay only. 4.1.0
isoCountryCode string ISO country code in the contact's address. Apple Pay only. 4.1.0
subAdministrativeArea string Sub-administrative area in the contact's address. Apple Pay only. 4.1.0
subLocality string Sublocality in the contact's address. Apple Pay only. 4.1.0

Reference