Apple Pay on the Web Demo

Overview

Try an Apple Pay test transaction below. Your card will not be charged.


Your browser or device does not support Apple Pay on the web.
To try out this demo, open this page in Safari on a compatible device.
(See OS requirements for this demo below.)

You can use this page to learn how to enable Apple Pay on the web using Apple Pay JS. Each button is preconfigured with some default values, and if you want to explore further you can modify values in the code blocks throughout the page to customize different payment sheet experiences. A transcript of server responses is displayed at the bottom of the page after each transaction for context.

Requirements

This demo is built using Apple Pay JS version 3, and requires the following:

  • iOS devices running iOS 11 or later
  • Safari 11 on Mac devices running macOS 10.13 or later


Getting Started

This guide assumes you have already set up your environment to process Apple Pay transactions, and are familiar with Apple Pay best practices. Before starting your integration, we recommend reviewing Getting Started with Apple Pay and the Apple Pay on the Web Human Interface Guidelines.

Display an Apple Pay button

To make sure you only display the Apple Pay button where appropriate, you should first check whether the Apple Pay JS API is available in the browser by verifying that the ApplePaySession class exists.

Next, call the canMakePayments method to verify the device is capable of making Apple Pay payments. If it returns true, display the Apple Pay button:

if (window.ApplePaySession && ApplePaySession.canMakePayments()) 
// Display Apple Pay Button

WebKit provides a number of Apple Pay button styles, so there's no need create your own. Using the styles provided by WebKit ensures that the button will always have the most current design, and will render correctly across devices. Use button type plain or buy on your website wherever users initiate payment, like a product detail page or shopping cart page. For additional guidance on which button style to use in various situations, see Displaying Apple Pay Buttons.

Use this tool to visualize buttons of different types, styles and dimensions, localized to different languages, and view their associated CSS properties. For information on button types and their required iOS and macOS versions, see Displaying Apple Pay Buttons.




Your browser or device does not support Apple Pay on the web.
To try out this demo, open this page in Safari on a compatible device.

style="-webkit-appearance: -apple-pay-button;
       -apple-pay-button-type: plain;
       -apple-pay-button-style: black;"
lang=en

Create a Payment Request

When your customer clicks on the Apple Pay button, you will construct an ApplePaySession object which includes the ApplePayPaymentRequest dictionary detailing what you'd like displayed in the payment sheet.

Details like transaction total, currency, and the card networks you support are required fields. You can also pass in lineItems to explain additional charges or discounts, as well as shippingMethods to populate different shipping options for the customer to choose. If you need address or contact details from your customer, request them by passing values in the requiredShippingContactsFields or requiredBillingContactFields.

Try it: ApplePayPaymentRequest

Configure the values in the ApplePayPaymentRequest structure below to see how the information is displayed on the payment sheet. Choose Basic Request to see a payment sheet with only the required fields. Choose Detailed Request to include optional fields.




Your browser or device does not support Apple Pay on the web.
To try out this demo, open this page in Safari on a compatible device.

Complete Merchant Validation

To display the payment sheet to the customer and initiate the merchant validation process, you must call the begin method. In the onvalidatemerchant handler, you will do a server-to-server call to pass a payload to the Apple Pay validationURL endpoint. If successful, Apple Pay servers will return a merchant session object you will use in your response to completeMerchantValidation.

Learn more about merchant validation by reading Requesting an Apple Pay Payment Session and reviewing the transaction transcript.

Respond to Payment Sheet Interactions

Once you successfully complete merchant validation, Apple will provide you with information about your customer's selections in the payment sheet to complete transaction cost calculations. To receive this information, you will need to implement the following event handlers: onpaymentmethodselected, onshippingmethodselected, and onshippingcontactselected.

You have 30 seconds to handle each event before the payment sheet times out using the following callback functions respectively: completePaymentMethodSelection, completeShippingMethodSelection, and completeShippingContactSelection. You can pass in newLineItems or newTotal to each callback function to reflect new or updated totals in the payment sheet. completeShippingContactSelection also accepts newShippingMethods or address errors. If no updates or errors are needed, pass an empty array or null to indicate a success response.

Shipping Address Selection

If you pass requiredShippingContactFields in the payment request with a postalAddress value, you will receive redacted address information prior to the user authenticating the transaction using Face ID, Touch ID, or their device passcode. Once the user has successfully authenticated, you will receive the full contact information.

The redacted payment information includes only the data needed to complete required transaction tasks such as calculating taxes or shipping costs, and may differ based on the user's geographic region.


onshippingcontactselected:
{
    "administrativeArea": "CA",
    "country": "United States",
    "countryCode": "US",
    "familyName": "",
    "givenName": "",
    "locality": "San Francisco",
    "phoneticFamilyName": "",
    "phoneticGivenName": "",
    "postalCode": "94114",
    "subAdministrativeArea": "",
    "subLocality": ""
}

Try it: completeShippingContactSelection

Customize the completeShippingContactSelection response by configuring the ApplePayShippingContactUpdate structure below to see how updates or address errors are displayed in the sheet.

Choose Success with or without updating line items and total below. Choose Failure to see completeShippingContactSelection response with custom errors




Your browser or device does not support Apple Pay on the web.
To try out this demo, open this page in Safari on a compatible device.

Authorize the Payment

After the user authenticates the transaction using Face ID, Touch ID, or their device passcode, you will receive the encrypted Apple Pay token, as well as the requested contact information. Once you process the payment, you will pass in the completePayment method with STATUS_SUCCESS or STATUS_FAILURE and if needed, indicating any errors.

Try it: completePayment

Use the following values to customize the completePayment response below:

Choose Success below to default to STATUS_SUCCESS. Choose Failure to see a completePayment response with custom errors.




Your browser or device does not support Apple Pay on the web.
To try out this demo, open this page in Safari on a compatible device.

Demo Transaction Transcript

After you have configured the Apple Pay JS code blocks for paymentRequest, completeShippingContactSelection, and completePayment above, see below for the results.

Note: If completePaymentMethodSelection is called, the test transaction will always pass in a default success reponse. If completeShippingMethodSelection is called, the test transaction will pass in newLineItems and newTotal. See responses in the transcript.



    

Questions or Feedback

Check out our developer forums or reach out to us.