Apple Pay on the Web
Interactive Demo

Try an Apple Pay test transaction using the button below.
Transactions made on this site do not charge your card.

Overview

Use this page to learn how to enable Apple Pay on the web using Apple Pay JS or the Payment Request API. This demo preconfigures the Apple Pay button below with default values. Explore further by modifying values in the code blocks throughout the page to customize payment sheet experiences. This demo displays a transcript of server responses after each transaction for context. Click or tap the the "Show Transcript" tab to view the transaction transcript.

As well as letting you try out the Apple Pay JavaScript APIs, this demo can also serve as a tutorial for your own implementation. It 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. For more information about supporting Apple Pay on your website, see Apple Pay on the Web.

This demo generates source code that you can copy into your own project. Click or tap the the "Show Source" tab to view the source code. The demo updates the source code as you change values in the code blocks through the page. Once you are happy with the configuration, click or tap the "Copy" button inside the "Show Source" tab to copy the source code to your clipboard.

Choose the JavaScript API you want to explore.

Requirements

This demo uses Payment Request API, and to run this demo you must be using:

  • iOS devices running iOS 11.3 or later
  • Safari 11.1 on macOS 10.13 or later

Display an Apple Pay button

To display an Apple Pay Button, use the following code to load the button script into your webpage from the content delivery network:


<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>

The JavaScript Apple Pay button provides a variety of Apple Pay button types that you can use on your website to initiate a transaction. You can specify the Apple Pay button style, type, and localization using attributes. Use CSS to set other properties, such as the size and corner radius. Using the official Apple Pay button element ensures your site will display the latest style, render correctly across devices, and follow Apple Guidelines. For design guidance, see Human Interface Guidelines > Apple Pay > Buttons and Marks.

Try it: Display Settings

Use the following tools to try the different display settings on the button shown below:








<style>
apple-pay-button {
  --apple-pay-button-width: 150px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 3px;
  --apple-pay-button-padding: 0px 0px;
  --apple-pay-button-box-sizing: border-box;
}
</style>
<apple-pay-button buttonstyle="black" type="plain" locale="en"></apple-pay-button>

Create a Payment Request

When your customer clicks or taps the Apple Pay button, you construct a PaymentRequest.


var request = null;
if (window.PaymentRequest)
    request = new PaymentRequest(methods, details, options);
else
    // Consider using Apple Pay JS instead.

The PaymentRequest constructor takes three arguments:

  • The payment methods you support
  • The details to show to your customer (like shipping options and total amount)
  • The options you require

Payment Methods

Payment methods represent the means by which you can accept payments from your customer using Payment Request. You specify the payment methods you accept as a sequence of PaymentMethodData dictionaries, each of which contains an identifier (supportedMethods) and associated information (data).

To accept payments using Apple Pay through the Payment Request, include it as a payment method. Apple Pay’s URL-based payment method identifier is "https://apple.com/apple-pay", and its associated data is an ApplePayRequest dictionary.

Safari supports only the Apple Pay payment method. Other browsers may support additional methods. The system determines which payment methods to present to show based on the capabilities of the device and on user preferences when more than one method is specified.

Try it: Apple Pay Method

You may configure the values in the PaymentMethodData structure below.

Choose Basic Request to see a payment sheet with only the required fields. Choose Detailed Request to include optional fields.

Click or tap the Apple Pay button below to see how the payment sheet displays information.



Payment Details

Supply the payment details in the PaymentDetailsInit dictionary. It contains your transaction’s total amount, display items, shipping options, and payment method-specific modifiers. For more information on payment modifiers, see Payment Modifiers below.

Choose a default shipping option by setting the selected attribute to true as done in Try it: Payment Details for "Ground Shipping" when selecting More Details. The total amount must be $0.00 or greater, and when using Apple Pay, all payment amounts in your request must use the same ISO 4217 currency code. It is up to you to ensure the correctness of your payment details; Safari does not do any currency calculations on your behalf.

Payment Modifiers

Apple Pay can update your transaction’s display items and total when you include optional modifiers in your payment details. For example, you can adjust the price based on the type of payment card.

Modifiers provide some of the functionality present in the paymentmethodselected event. For more information, see ApplePayModifier.

Try it: Payment Details

You may configure the values in the PaymentDetailsInit structure below.

Choose Basic Details to see a payment sheet with only the required fields. Choose More Details to include more fields. Choose More Details With Modifiers to include a modifier adding a $1.00 discount for using a debit card.

Click or tap the Apple Pay button below to see how the payment sheet displays information.



Payment Options

Use PaymentOptions to specify the information to request from your customer. You can request your customer’s name, email address, or phone number, or request a certain type of shipping.

Try it: Payment Options

You may configure the values in the PaymentOptions structure below.

Choose Request Shipping Information to see a payment sheet with only a shipping request. Choose Request All Information to see a payment sheet with all customer requests.

Click or tap the Apple Pay button below to see how the payment sheet displays information.


Complete Merchant Validation

Before being able to display the payment sheet to the customer, you must generate a valid payment session by interacting with Apple Pay Servers. For security reasons, your server must do this, not your browser client code, unlike everything else in this demo. To start the merchant validation process, call the show method on the PaymentRequest you created above.

Once you do, the browser will invoke your onmerchantvalidation handler, which must fetch a merchant session from your server.

Refer to the instructions in Requesting an Apple Pay Payment Session document to implement your server endpoint responsible for fetching the merchant session object from Apple Pay servers. If successful, Apple Pay servers will return a merchant session object, which your server must then pass back as the response to the browser.

You must complete your onmerchantvalidation handler by passing the promise containing the merchant session response to the complete method on the event. The browser will then display the payment sheet.

The following code shows an example of how to validate merchant:


request.onmerchantvalidation = event => {
    // Call your own server to request a new merchant session.
    const merchantSessionPromise = fetch("/authorizeMerchant")
        .then(res => res.json()) // Parse response as JSON.
        .catch(err => {
            console.error("Error fetching merchant session", err);
        });

    event.complete(merchantSessionPromise);
};

Respond to Payment Sheet Interactions

After merchant validation is complete, Apple Pay provides the information about your customer’s payment sheet selections so that you can calculate the final transaction cost. The final details of a transaction may depend on user shipping address, or shipping method. To handle these adjusments, implement the optional handlers onpaymentmethodchange, onshippingoptionchange, and onshippingaddresschange. In the event handlers, you can determine the user's selection using the PaymentRequest's shippingOption and shippingAddress attributes.

When the browser calls one of these handlers, you must call the event object's updateWith callback function with a promise which resolves within 30 seconds to a PaymentDetailsUpdate, otherwise the transaction times out.

Note: The PaymentDetailsUpdate should not require the total member, but there is a known issue that requires it.

Note: To not get a null shippingOption from the PaymentResponse you must pass shippingOptions to the PaymentDetailsUpdate. This is a known issue.

Note: In order for the displayItems and the modifiers to not get reset, you must pass them to the PaymentDetailsUpdate.

Request a Shipping Address

If you set requestShipping to true in the PaymentOptions dictionary, Apple Pay provides redacted address information before the user authenticates the transaction. After the user authenticates, Apple Pay provides the full contact information in the PaymentResponse resolved by the show method's returned promise.

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.

The following code shows an example of a redacted payment information:


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

Try it: Updating Payment Details

You may customize the PaymentDetailsUpdate below.

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

Click or tap the Apple Pay button below to see how the payment sheet displays updates or address errors.



Authorize the Payment

Finally, you receive a PaymentResponse through the show method's returned promise to process the transaction. After the user authenticates the transaction using Face ID, Touch ID, or their device passcode, this promise will resolve with the encrypted Apple Pay token, as well as any fields requested in the PaymentOptions. To finalize the transaction, you need to pass the encrypted payment token to your payment processor using their API.

Once you receive the response from your payment processor, call the complete method on the response and pass in a status of success or fail.

You may also validate the user's info, and invoke the complete method immediately, without calling the payment processor, if you detect an problem with the selected options (for example, if a user has selected a shipping address in a location that you do not service).

Try it: complete

You may customize the complete response below.

Choose Success below to default to success. Choose Failure to see a fail response.

Click or tap the Apple Pay button below to see how the payment sheet completes the payment.


Additional Resources

Ready to integrate Apple Pay in to your website? Here are a few links you may find useful:

Questions or Feedback

Check out our developer forums or reach out to us.