Apple Pay (4.10.3)

Apple Pay

Use Recurly.js to process Apple Pay transactions

Recurly.js supports Apple Pay out of the box. To get started, ensure your site is configured to accept Apple Pay transactions.

Setting up your Apple Pay integration in Recurly.js involves two parts: a) displaying the button, and b) invoking the purchase flow.

Displaying the button

Your button styling needs to adhere to Apple’s specifications.

See Apple's documentation on Displaying the Apple Pay Button for guidelines on display and styling the button.

Invoking the purchase flow

Configure a new instance of recurly.ApplePay as follows.

var applePay = recurly.ApplePay({
  country: 'US',
  currency: 'USD',
  label: 'My Subscription', // This text will be displayed on the Apple Pay payment sheet as "My Subscription"
  total: '29.00'
});

// When the ApplePay instance is ready, bind the Apple Pay button click
// to applePay.begin
applePay.ready(function () {
  $('#my-apple-pay-button').on('click', function () {
    applePay.begin();
  });
});

// Handle errors. These may occur at any point in the Apple Pay flow
applePay.on('error', function (err) {
  // err.code, err.message
  console.error('Apple Pay error', err);
});

// This will fire when the flow is completed and a token has been generated
applePay.on('token', function (token) {
  console.log('Apple Pay succeeded. Token:', token.id);
  // Submit the token to your server
});

Additional configuration

If you are using the recurly.Pricing class to calculate checkout prices, you may pass your pricing instance instead of providing a total.

var pricing = recurly.Pricing();

var applePay = recurly.ApplePay({
  // ...
  pricing: pricing
});

To provide additional customer data to tokens generated by recurly.ApplePay, you may pass a form reference. recurly.ApplePay will collect customer data from the form just as would occur during credit card tokenization. See Getting a Token for more information on building such a form.

var applePay = recurly.ApplePay({
  // ...
  form: document.querySelector('#my-payment-form')
});

Integration notes

• Recurly.js will automatically pull in the billing info from the customer's Apple account if their Apple Pay setup is complete with full billing information in their Apple Wallet. If the user does NOT have a billing name or address attached to their card in their Apple Wallet, the Apple Pay flow will prompt the customer for a billing address.
• If you choose to include a Recurly.js payment form, any billing name or address fields entered on that form will be used instead of the address in the user's Apple Wallet; the token request will contain the fields entered on the payment form. If the form is completely empty of name and address inputs, the token request will contain the name and address chosen by the user during the Apple Pay flow.

Reference

recurly.ApplePay

Arguments

Returns

A new recurly.ApplePay instance

applePay.ready

Arguments

Returns

Nothing.

Events

token

This event is fired when the customer has completed the Apple Pay payment sheet flow. Recurly has received the payment details, and generated this token to be used in our API.

Signature

error

This event is emitted when any error is encountered, whether during setup of the Apple Pay payment sheet, or during payment authorization. It will be useful to display errors to your customer if a problem occurs during the Apple Pay flow.

Signature

Error codes

See Errors