Apple Pay on the Web site flows

Product details page

The Product details page is where customers can view complete and detailed information about a product. The product details include the name, price, full image, short and long descriptions, the defining and descriptive attributes, and any assets that are associated with the product. Customers can check inventory availability for the product and add the product to their shopping cart or wish list. The page also displays four e-Marketing Spots. The product details page uses a responsive web design pattern and the Commerce Composer framework.

Apple Pay on the Web sample assets enhance the product details page to contain an Apple Pay button, so that customers can pay for products without having to add them to the shopping cart:

Product details page with merchandising associations

The product details page supports Apple Pay on the Web payments for merchandising associations. The behavior of the Apple Pay button from the merchandising association acts in the same way as the Add to Cart button. It adds both the main product in the product display page plus the associated product, and starts an Apple Pay purchase by showing the payment sheet.

Product listing page, list view

The product listing page supports Apple Pay on the Web payments for the list view:

Shopping cart page

The Shopping Cart page lists all of the items that a customer adds to their shopping cart. Customers begin the check out process from this page. Customers can change the attributes of an item, move an item to a wish list, or remove an item from the shopping cart. Customers can also apply promotional codes and coupons, or select promotional gifts.

Apple Pay on the Web sample assets enhance the shopping cart page to contain an Apple Pay button, so that customers can check out and pay for the products that they have already added to the shopping cart:

Mini shopping cart widget

The mini shopping cart widget displays the number of items in the shopping cart from the store header. Customers can click this area to display the cart contents and go to the cart.

Apple Pay on the Web sample assets enhance the mini shopping cart widget to contain an Apple Pay button, so that customers can check out and pay for the products that they have already added to the shopping cart:

Apple Pay payment sheet and check out

Apple Pay on the Web sample assets include the Apple Pay payment sheet as part of the check out flow. The payment sheet contains the billing and shipping information, payment method, contact information, and order totals. After the shopper competes the payment on the payment sheet, for example, by using Touch ID, the order confirmation page is displayed.

Buy online, pick-up in store

Apple Pay on the Web sample assets support buy online, pick-up in store.

In the checkout flow:

In the payment sheet:

Notes and considerations

• A customer service representative (CSR) cannot use Apple Pay on behalf of a customer. Only the customer is able to use Apple Pay.
• Only B2C check out flows are supported for Apple Pay. You can use the B2C check out flows on a B2B store if they meet your requirements. For more information, see Checkout flows.