ApplePay Container

Version: 3.1.0

Configuration

The ApplePay container provides the following configuration options:

Parameter	Type	Req?	Description
location	PaymentLocation	Yes	Location where the Apple Pay button is to be rendered.
getCartId	function	No	Required if createCart not provided. Should return a promise that resolves to the shopper’s cart ID.
createCart	{ getCartItems: () => CartItem[]; }	No	Provides cart items when getCartId is not used.
onButtonClick	function	No	Called when the user clicks the Apple Pay button. This callback receives a ‘showPaymentSheet’ function as its only argument that must be called to begin the Apple Pay session and show the payment sheet. IMPORTANT: The ‘showPaymentSheet’ function must be called synchronously. If called asynchronously, it will throw an exception: “Must create a new ApplePaySession from a user gesture handler.”
onSuccess	function	No	Called when payment flow is successful.
onError	function	No	Called when the payment flow was aborted due to an error. The function receives an object with two properties, { name: string, message: string }, containing the localized error name and message. Both properties are user-facing and can be translated using the “PaymentServices.ApplePay.errors” language definitions.
hidden	boolean	No	Whether the Apple Pay button is hidden from the layout.
disabled	boolean	No	Whether the Apple Pay button is disabled. Set this to true to disable the button (default: false).

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the ApplePay container:

import { render as provider } from '@dropins/storefront-payment-services/render.js';
import { ApplePay } from '@dropins/storefront-payment-services/containers/ApplePay.js';

await provider.render(ApplePay, {
  location: location,
  getCartId: getCartId,
  createCart: [],
})(block);