ApplePay Container

The ApplePay container renders a checkout button that enables macOS and iOS users to pay using Apple Pay .

Version: 3.1.1

Configuration

The ApplePay container provides the following configuration options:

Option	Type	Req?	Description
location	string	Yes	Location where Apple Pay is rendered. Must be either CHECKOUT or PRODUCT_DETAIL.
getCartId	function	Maybe	Required if createCart is not provided. Returns a promise that resolves to the shopper’s cart ID.
createCart	object	Maybe	Required if getCartId is not provided. Provides cart items when getCartId is not used. Must be an object with a getCartItems function that returns at least one cart item. Each item must include at least a sku (string) and quantity (number). See “Cart item object” for details.
onButtonClick	function	No	Called when the shopper clicks the Apple Pay button. Receives a showPaymentSheet function, which must be called synchronously to start the Apple Pay session and display the payment sheet. If the onButtonClick callback is not provided, clicking the Apple Pay button will automatically trigger the payment sheet.
onSuccess	function	No	Called when the payment completes successfully. Receives { cartId: string }. If the function returns a promise, it is awaited before marking the payment as successful in the Apple Pay sheet. If the promise rejects, the payment is marked as failed and the error is passed to onError (if provided).
onError	function	No	Called when the payment flow fails or is aborted. Receives { name: string, message: string }, containing localized, user-facing error details. These values can be translated using PaymentServices.ApplePay.errors language definitions.
hidden	boolean	No	Whether the button is hidden. Set to true to hide the Apple Pay button. Default: false.
disabled	boolean	No	Whether the button is disabled. Set to true to disable the Apple Pay button. Default: false.

Cart item object

The cart items that getCartItems returns should be objects with the following properties:

Property	Type	Req?	Description
sku	string	Yes	The product SKU.
quantity	number	Yes	The quantity of the product.
parentSku	string	No	The parent product SKU.
selectedOptions	(string | number)[]	No	Selected product options.
enteredOptions	{ uid: string | number; value: string }[]	No	Entered product options.

Slots

This container does not expose any customizable slots.

Usage

Checkout page example

The following example demonstrates how to use the ApplePay container on the checkout page.

import ApplePay from '@dropins/storefront-payment-services/containers/ApplePay.js';
import { render as PaymentServices } from '@dropins/storefront-payment-services/render.js';
import * as orderApi from '@dropins/storefront-order/api.js';
import { PaymentLocation } from '@dropins/storefront-payment-services/api.js';

const cart = events.lastPayload('checkout/initialized');

if (cart) {
  const $content = document.createElement('div');
  PaymentServices.render(ApplePay, {
    location: PaymentLocation.CHECKOUT,
    getCartId: async () => cart.id,
    onSuccess: () => orderApi.placeOrder(cart.id),
    onError: (error) => { console.error(error) },
  })($content);
}

Product details page example

The following example demonstrates how to use the ApplePay container on a product details page.

import ApplePay from '@dropins/storefront-payment-services/containers/ApplePay.js';
import { render as PaymentServices } from '@dropins/storefront-payment-services/render.js';
import * as orderApi from '@dropins/storefront-order/api.js';
import { PaymentLocation } from '@dropins/storefront-payment-services/api.js';

const product = events.lastPayload('pdp/values');

if (product) {
  const $content = document.createElement('div');
  PaymentServices.render(ApplePay, {
    location: PaymentLocation.PRODUCT_DETAIL,
    createCart: {
      getCartItems: () => [{
        sku: product.sku,
        quantity: 1,
      }],
    },
    onSuccess: ({cartId}) => orderApi.placeOrder(cartId),
    onError: (error) => { console.error(error) },
  })($content);
}