Amazon Pay script
- Amazon Pay script
- Render the Amazon Pay button
- Decoupling button render and checkout initiation
- Render button using a Checkout Session object
- Responsive button rendering
- Enable checkout detail updates
- Sign out from Amazon
Amazon Pay script
Add the Amazon Pay script to your HTML file to enable front-end functionality on your website.
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
<script src="https://static-eu.payments-amazon.com/checkout.js"></script>
Render the Amazon Pay button
Use amazon.Pay.renderButton() to render the Amazon Pay button to a HTML container element.
Code sample
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: 'merchant_id',
ledgerCurrency: 'USD',
publicKeyId: 'SANDBOX-xxxxxxxxxx',
// customize the buyer experience
checkoutLanguage: 'en_US',
productType: 'PayAndShip',
placement: 'Cart',
// configure Create Checkout Session request
createCheckoutSessionConfig: {
payloadJSON: 'payload',
signature: 'xxxx'
}
});
</script>
</body>
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-eu.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: 'merchant_id',
ledgerCurrency: 'EUR',
publicKeyId: 'SANDBOX-xxxxxxxxxx',
// customize the buyer experience
checkoutLanguage: 'en_GB',
productType: 'PayAndShip',
placement: 'Cart',
// configure Create Checkout Session request
createCheckoutSessionConfig: {
payloadJSON: 'payload',
signature: 'xxxx'
}
});
</script>
</body>
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-eu.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: 'merchant_id',
ledgerCurrency: 'GBP',
publicKeyId: 'SANDBOX-xxxxxxxxxx',
// customize the buyer experience
checkoutLanguage: 'en_GB',
productType: 'PayAndShip',
placement: 'Cart',
// configure Create Checkout Session request
createCheckoutSessionConfig: {
payloadJSON: 'payload',
signature: 'xxxx'
}
});
</script>
</body>
Parameters
Parameter
|
Description
|
merchantId (required) Type: string |
Amazon Pay merchant account identifier
|
createCheckoutSessionConfig (required) Type: checkoutSessionConfig |
Create Checkout Session configuration
|
placement (required) Type: string |
Placement of the Amazon Pay button on your website Supported values: ‘Home’, ‘Product’, ‘Cart’, ‘Checkout’, and 'Other' |
ledgerCurrency (required) Type: string |
Ledger currency provided during registration for the given merchant identifier Supported values:
|
productType Type: string |
Product type selected for checkout Supported values: 'PayAndShip' Default value: 'PayAndShip' |
checkoutLanguage Type: string |
Language used to render the button and text on Amazon Pay hosted pages. Please note that supported language(s) is dependent on the region that your Amazon Pay account was registered for Supported values:
|
sandbox Type: boolean |
Sets button to Sandbox environment You do not have to set this parameter if your publicKeyId has an environment prefix (for example: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B) Default value: false |
Decoupling button render and checkout initiation
If you need control of the Amazon Pay button click event, you can decouple the button render action and checkout initiation. Use amazon.Pay.renderButton() to render the button and amazon.Pay.initCheckout() to initiate Amazon Pay checkout.
CODE SAMPLE
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
merchantId: 'xxxxx',
ledgerCurrency: 'GBP',
publicKeyId: 'SANDBOX-xxxxxxxxxx',
checkoutLanguage: 'en_GB',
productType: 'PayAndShip',
placement: 'Cart'
});
amazonPayButton.onClick(function(){
// define your custom actions here
amazonPayButton.initCheckout({
createCheckoutSessionConfig: {
payloadJSON: 'payload',
signature: 'xxxx'
}
});
});
Render button using a Checkout Session object
Instead of generating a payload that Amazon Pay will use to create a Checkout Session object, you can also set up an endpoint on your server that calls Create Checkout Session. Set that endpoint in the button render code and the Amazon Pay script will make an AJAX request using that URL each time the button is clicked.
CODE SAMPLE
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-eu.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
merchantId: 'merchant_id',
createCheckoutSession: {
url: 'https://mystore/amazonpay/createcheckoutsession'
},
sandbox: true, // dev environment
ledgerCurrency: 'GBP', // Amazon Pay account ledger currency
checkoutLanguage: 'en_GB', // render language
productType: 'PayAndShip', // checkout type
placement: 'Cart' // button placement
});
</script>
</body>
Responsive button rendering
The Amazon Pay button is responsive and inherits the size of the container element according to the following logic:
- If no height or width is specified, the button container defaults to 200px by 45px.
- If only width is specified, the button container height will be set to 45px. The provided width must be between 150px and 500px or container width will be resized to the closest supported value.
- If only height is specified, the button container width will be set to 500px. The provided height must be between 45px and 192px or container height will be resized to the closest supported value.
- If both height and width are specified, the button container will be resized to meet these conditions:
- The container width must be between 150px and 500px. If the provided width is outside those limits, the container width will be resized to the closest supported value.
- The container height must be between 45px and 192px. If the provided height is outside those limits, the container height will be resized to the closest supported value.
- The container height:width ratio must be between 1:10 and 1:2.6. If the ratio is outside those limits, the container width will be set to the provided value and the container height will be adjusted to a supported ratio value.
Enable checkout detail updates
Use amazon.Pay.bindChangeAction() to enable updates in case the buyer wants to select a different shipping address or payment method.
Code sample
<script type="text/javascript" charset="utf-8">
amazon.Pay.bindChangeAction('#changeButton1', {
amazonCheckoutSessionId: 'xxxx',
changeAction: 'changeAddress'
});
</script>
Parameters
Parameter
|
Description
|
amazonCheckoutSessionId (required) Type: string |
Amazon Pay Checkout Session identifier
|
changeAction (required) Type: string |
Update requested by the buyer Supported values: 'changeAddress', 'changePayment' |
Sign out from Amazon
Use amazon.Pay.signout() to give buyers the option of signing out from their Amazon account.
Best practice: Give buyers the option of signing out after they complete checkout. Bind the function to a “Sign out from Amazon” link on your order confirmation page.
Code sample
<script type="text/javascript">
document.getElementById('Signout').onclick = function() {
amazon.Pay.signout();
};
</script>