Set up Apple Pay

This guide describes how to use the FramePay library to tokenize payments made using Apple Pay.

If you want to use Apple Pay inside an iOS application, contact us.

Prerequisites

To complete this guide, you must have an organization ID, a website ID, and a publishable API key.

You must also have a payment gateway configured in your Rebilly account. For sandbox testing, the TestProcessor gateway is pre-configured.

If you already have your IDs and API key, continue to Step 1: Initial setup. If you do not, see Set up your environment.

Step 1: Initial setup

Set up the FramePay library and create the necessary HTML structure.

Include the FramePay stylesheet

Add the default styles for the FramePay library elements on the page.

Include the FramePay script

Expose the FramePay library in the global JS scope as Framepay.

Include the HTML mounting points

Specify an empty HTML element where the FramePay library will mount the Apple Pay button.

Add a new HTML element with a unique ID to your checkout form.

Step 2: Configure FramePay

This step describes the basic configuration needed to mount the Apple Pay button.

Initialize

Create a configuration object and initialize the FramePay library.

For more information, see FramePay configuration reference.

Rebilly data

Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.

For more information, see Prerequisites.

Transaction data

Provide the transaction data. Apple Pay requires amount, currency, and label values.

Step 3: Get the payment token

Mount the FramePay library onto your page and listen for a payment token.

  • The initial transaction must use the payment token, not a payment instrument, to pass Apple Pay authentication parameters.

  • After completing a transaction with the token, the payment instrument is returned and can be reused.

  • Apple Pay authentication parameters are not persisted to the payment instrument, but the gateway retains reference to the initial customer-facing transaction.

  • Creating a payment instrument from the token only includes basic card data (device PAN, expiry).

For more information, see Payment instruction.

Mount the Apple Pay button

Mount the Apple Pay button in the container element.

Framepay.on('ready', ...)

Framepay.applePay.mount(...)

Listen for the generated payment token

When a customer completes the Apple Pay flow, Rebilly creates a payment token. Listen for the token-ready event to retrieve it.

At this point you can use the token for other operations, for example to create a payment instrument or transaction.

Framepay.on('token-ready', ...)

Preview

Complete the payment flow using this test card number: 4111 1111 1111 1111. Use any future expiration date and any 3 digits for the CVC number. For more test cards, see Test payment cards, IBANs, and ACH details.

<!doctype html>
<html>
    <head>
        <link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
        <script src="https://framepay.rebilly.com/framepay.js"></script>
        <script src="./client.js" defer></script>
    </head>
    <body>
        <form>
            <div id="apple-pay-mount"></div>
        </form>
    </body>
</html>