Ecommerce plugins > Recurly

Integration

After setting up your Amazon Pay account and configuring your Recurly site, you're ready to add the Amazon Pay library to subscription checkout integration.

Recurly provides a free JavaScript plug-in library that makes it easy to add Amazon Pay into your flow. The interactions take place in in-line widgets that can be configured based on simple options. The only experience outside of your site is the initial Amazon login. After the customer logs in, they're directed back to your site to confirm the address and payment method in the Amazon Pay widgets.

Simply include the JavaScript below in the document <head>

<script src="pay-with-amazon.min.js"></script>

Also in the document <head>, invoke PayWithAmazon with your configurations.


var payWithAmazon = new PayWithAmazon({
	sellerId: 'ABC',
	clientId: 'XYZ',
	button: { id: 'pay-with-amazon', [type], [color] },
	addressBook: { id: 'address-book', [width], [height] },
	wallet: { id: 'wallet', [width], [height] },
	consent: { id: 'consent', [width], [height] }
});

With these code changes, when your customer confirms their Amazon payment info to use for the subscription, the Amazon Billing Agreement ID (id) will be returned and can then be used with Recurly's create subscription API as the account's billing info. Recurly.js is not required for integrating Amazon Pay with your Recurly account.


<?xml version="1.0" encoding="UTF-8"?>
  <subscription>
    <plan_code>gold</plan_code>
    <currency>USD</currency>
    <account>
      <account_code>customer</account_code>
      <billing_info>
        <amazon_billing_agreement_id>abc-xyz</amazon_billing_agreement_id>
      </billing_info>
    </account>
  </subscription>

Case 1: Standard subscription

The code below provides a basic example of the standard settings for the Amazon Pay widgets. This would display the Amazon address, payment, and consent widgets.


var payWithAmazon = new PayWithAmazon({
  sellerId: 'ABC',
  clientId: 'XYZ',
  button: { id: 'pay-with-amazon', type: large, color: DarkGray },
  addressBook: { id: 'address-book', width: 400, height: 260 },
  wallet: { id: 'wallet', width: 400, height: 260 },
  consent: { id: 'consent', width: 400, height: 140 }
});

Case 2: No Address widget

You may want to streamline your checkout experience if you are selling only digital goods and do not require an account address. In this case, you can remove the Amazon address widget, as shown in the code sample below.


var payWithAmazon = new PayWithAmazon({
  sellerId: 'ABC',
  clientId: 'XYZ',
  button: { id: 'pay-with-amazon', type: large, color: DarkGray },
  wallet: { id: 'wallet', width: 400, height: 260 },
  consent: { id: 'consent', width: 400, height: 140 }
});

Check out the GitHub repository for more details on the usage and other available customization options.

Menu

Support

Integration

Case 1: Standard subscription

Case 2: No Address widget