Ecommerce plugins > Recurly

Integration

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

Recurly provides a free JavaScript plug-in library that makes it easy to add HAQM 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 HAQM login. After the customer logs in, they're directed back to your site to confirm the address and payment method in the HAQM 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 PayWithHAQM with your configurations.


var payWithHAQM = new PayWithHAQM({
	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 HAQM payment info to use for the subscription, the HAQM 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 HAQM 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 HAQM Pay widgets. This would display the HAQM address, payment, and consent widgets.


var payWithHAQM = new PayWithHAQM({
  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 HAQM address widget, as shown in the code sample below.


var payWithHAQM = new PayWithHAQM({
  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