How can I use Amazon Payments V2 with my own button?

Introduction

This article explains how to integrate Amazon Pay V2 with a custom button into your website. This method allows your customers to quickly and securely pay using the payment and shipping information stored in their Amazon account, while maintaining the appearance and user experience of your checkout page.

Step-by-Step Guide

Step 1: Embed the Amazon Pay Script

Insert the Amazon Pay checkout script into the HTML code of your website:

<script src="https://static-eu.payments-amazon.com/checkout.js"></script>

Step 2: Create a Hidden Amazon Pay Button

Create a hidden div element for the Amazon Pay button and initialize it with the necessary configuration parameters:

<div id="AmazonPayButton"></div>
<script type="text/javascript" charset="utf-8">
const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
merchantId: 'YourMerchantID',
publicKeyId: 'YourPublicKeyID',
ledgerCurrency: 'EUR',
checkoutLanguage: 'de_DE',
productType: 'PayAndShip',
placement: 'Cart',
buttonColor: 'Gold',
});

// Hide the Amazon Pay button
document.getElementById('AmazonPayButton').hidden = true;
</script>

Step 3: Add Your Own Button

Add your own button, if not already present:

function startAmazonPayCheckout() {
amazonPayButton.initCheckout({
estimatedOrderAmount: { "amount": "109.99", "currencyCode": "EUR"},
createCheckoutSessionConfig: { 
payloadJSON: 'YourPayload',
signature: 'YourSignature'
}
});
}