Set up Apple Pay

This topic describes how to use FramePay to tokenize payments made using Apple Pay.

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

1

Initial set up

Set up the library and provide the HTML.

Include the FramePay stylesheet

This adds default styles to FramePay elements on the page.

HTML

Include the FramePay script

This exposes FramePay in the global JS scope as Rebilly.

HTML

Include the HTML mounting points

You must specify an empty HTML element where FramePay renders the Apple Pay button.

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

HTML
2

Configure FramePay

This step describes the basic set up for mounting.

Initialize

Initialize FramePay with a configuration object.

FramePay configuration reference

JavaScript

Rebilly data

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

Transaction data

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

JavaScript
3

Get the payment token

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

Mount the Apple Pay button

After initialization, mount the Apple Pay button in the container element.

Rebilly.on('ready', ...)

Rebilly.applePay.mount(...)

JavaScript

Listen for the generated payment token

When a customer completes the Apple Pay flow, Rebilly creates a payment token.

To retrieve it, listen for the token-ready event.

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

JavaScript

Basic set up complete

To learn more about Apple Pay and FramePay, see:

Copy to clipboard
  • JavaScript
  • HTML
1<!doctype HTML>
2<HTML>
3 <head>
4 <link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
5 <script src="https://framepay.rebilly.com/rebilly.js"></script>
6 </head>
7 <body>
8 <form>
9 <div id="apple-pay-mount"></div>
10 </form>
11 </body>
12</HTML>

Interactive example