Integrating Amazon Pay with JavaScript SDK

Aug 16, 2023

Categories:

javascript

ecommerce

amazonpay

Introduction

Amazon Pay is a secure and convenient payment solution that allows customers to make purchases on your website using their existing Amazon accounts. Integrating Amazon Pay into your website can offer several benefits, such as increasing trust, improving the checkout experience, and expanding your customer base.

By integrating Amazon Pay, you can leverage the familiarity and trust customers have with Amazon, which can lead to higher conversion rates. Customers can use their stored payment methods and shipping addresses, eliminating the need to enter this information manually. This streamlines the checkout process and reduces cart abandonment.

To integrate Amazon Pay into your website, you will need to use the JavaScript SDK provided by Amazon. JavaScript is a widely used programming language for web development, making it an ideal choice for integration. The JavaScript SDK provides a set of functions and methods that simplify the integration process and allow you to interact with the Amazon Pay API.

Using the JavaScript SDK for integration is important because it provides a seamless way to interact with the Amazon Pay API. It handles the complexity of the integration process, such as initializing the payment widget, handling events, and processing payments. The SDK also ensures that your integration remains up-to-date with the latest features and enhancements provided by Amazon Pay.

In the following sections, we will explore the steps required to set up and configure Amazon Pay using the JavaScript SDK. We will also cover how to handle payment events, process payments, and implement additional features like subscriptions and refunds. By the end of this article, you will have a clear understanding of how to integrate Amazon Pay into your website using the JavaScript SDK.

Prerequisites

Before integrating Amazon Pay with JavaScript SDK, there are a few prerequisites that you should be familiar with:

Basic knowledge of JavaScript is necessary as the integration involves using JavaScript to interact with the Amazon Pay API and handle payment events.
Understanding of HTML and CSS is important as you will be required to modify your website's HTML and CSS to include the Amazon Pay payment button and customize its appearance.
Familiarity with Amazon Pay integration concepts is crucial to understand the various steps involved in the integration process and to make the necessary configurations in your Amazon Pay account.

Having a good understanding of these prerequisites will make it easier for you to follow the integration steps and successfully integrate Amazon Pay into your website using the JavaScript SDK.

Setting up Amazon Pay

To integrate Amazon Pay into your website, you need to follow a few steps to set up your Amazon Pay account and install the JavaScript SDK.

Step 1: Creating an Amazon Pay account

First, you need to register for an Amazon Pay account. This can be done by visiting the Amazon Pay website and signing up. Once you have created your account, you will need to obtain the necessary credentials and keys for integration. These credentials include your Seller ID, Access Key, and Secret Key.

Step 2: Installing the JavaScript SDK

Next, you will need to download the JavaScript SDK from the Amazon Pay developer portal. This SDK is provided by Amazon and contains all the necessary functions and methods for integrating Amazon Pay into your website. Once you have downloaded the SDK, you can include it in your project by adding the script tag to your HTML file.

<script type="text/javascript" src="https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js"></script>

Make sure to replace the src attribute with the correct URL for the JavaScript SDK. The URL may vary depending on your region and whether you are using the sandbox or production environment.

With these steps completed, you are now ready to configure Amazon Pay and start integrating it into your website.

Step 1: Creating an Amazon Pay account

To integrate Amazon Pay into your website, the first step is to register for an Amazon Pay account. Visit the Amazon Pay website and sign up for an account by providing the required information.

Once you have registered, you will need to obtain the necessary credentials and keys for integration. These include the Seller ID, MWS Access Key, MWS Secret Key, and Client ID. These credentials can be obtained from the Amazon Pay developer portal.

By creating an Amazon Pay account and obtaining the required credentials, you will have the foundation necessary to begin integrating Amazon Pay into your website.

Step 2: Installing the JavaScript SDK

To start integrating Amazon Pay into your website, you will need to download the JavaScript SDK from the Amazon Pay developer portal. The SDK provides all the necessary functionalities and tools for seamless integration.

Here are the steps to install the JavaScript SDK:

Download the JavaScript SDK: Go to the Amazon Pay developer portal and navigate to the SDK documentation section. From there, you can download the latest version of the JavaScript SDK.
Include the SDK in your project: Once you have downloaded the SDK, you need to include it in your project. You can do this by adding a script tag in the head or body section of your HTML file. Specify the path to the downloaded SDK file in the src attribute of the script tag.
```
<script src="path/to/amazon-pay-sdk.js"></script>
```
Make sure to replace "path/to/amazon-pay-sdk.js" with the actual path to the downloaded SDK file.
Alternatively, you can also include the SDK using a package manager like npm or yarn. This allows you to easily manage dependencies and keep the SDK up to date.

That's it! You have successfully installed the JavaScript SDK for Amazon Pay integration. Now, you can move on to the next step of configuring Amazon Pay for your website.

Configuring Amazon Pay

Once you have set up your Amazon Pay account and installed the JavaScript SDK, you need to configure it to work with your website. This involves initializing Amazon Pay, handling payment button events, and building the checkout flow.

Step 1: Initializing Amazon Pay

To start using Amazon Pay, you need to initialize the SDK with the required parameters. This includes your Seller ID, which you can find in your Amazon Pay account settings, and the AWS access key and secret key associated with your account. You also have the option to set additional configuration options, such as the region and currency.

Here's an example of how to initialize Amazon Pay:

amazon.Pay.init({
  sellerId: 'YOUR_SELLER_ID',
  awsAccessKey: 'YOUR_AWS_ACCESS_KEY',
  awsSecretKey: 'YOUR_AWS_SECRET_KEY',
  sandbox: true, // Set to false for production
  region: 'us', // Set to your desired region
  currency: 'USD' // Set to your desired currency
});

After initializing Amazon Pay, you can check the initialization status using the isReady() method:

if (amazon.Pay.isReady()) {
  // Amazon Pay is ready to use
} else {
  // Amazon Pay is not ready
}

Step 2: Handling payment button events

Next, you need to create a payment button on your website and add event handlers to handle different button events. These events include authorization, selection, and error events.

Here's an example of how to create a payment button and handle the authorization event:

<button id="amazonPayButton"></button>

<script>
  document.getElementById('amazonPayButton').addEventListener('authorize', function(event) {
    var orderReferenceId = event.detail.orderReferenceId;
    // Handle authorization event
  });
</script>

You can listen for other events such as select and error to handle the selection of a payment method and any errors that occur during the checkout process.

Step 3: Building the checkout flow

Finally, you need to build the checkout flow to guide customers through the payment process. This involves fetching customer information and shipping address, displaying the order summary, and providing payment options.

You can use the Amazon Pay JavaScript SDK methods to fetch customer information, such as name, email, and shipping address. These methods include getBuyerDetails() and getShippingAddress().

Once you have the necessary information, you can display the order summary and available payment options to the customer. This can be done using HTML and CSS to create a user-friendly interface.

By following these steps, you can configure Amazon Pay to work seamlessly with your website and provide a smooth checkout experience for your customers.

Step 1: Initializing Amazon Pay

To begin integrating Amazon Pay into your website using the JavaScript SDK, you need to initialize Amazon Pay with the required parameters and verify the initialization status.

First, configure the SDK with the necessary parameters. This includes setting up your merchant ID, client ID, and seller ID. These credentials can be obtained from your Amazon Pay account.

amazonPaySdk.configure({
  merchantId: 'YOUR_MERCHANT_ID',
  clientId: 'YOUR_CLIENT_ID',
  sellerId: 'YOUR_SELLER_ID'
});

Once the SDK is configured, you can verify the initialization status to ensure that Amazon Pay has been successfully initialized.

amazonPaySdk.onReady({
  /**
   * This function is called when Amazon Pay is ready to be used.
   */
  ready: function() {
    console.log('Amazon Pay is ready.');
  },

  /**
   * This function is called when Amazon Pay encounters an error during initialization.
   * @param {string} errorType - The type of error that occurred.
   * @param {string} errorCode - The error code associated with the error.
   */
  onError: function(errorType, errorCode) {
    console.error('Error initializing Amazon Pay:', errorType, errorCode);
  }
});

By verifying the initialization status, you can ensure that Amazon Pay is successfully integrated into your website and ready to be used for payments.

This step is crucial as it sets up the foundation for the rest of the integration process.

Step 2: Handling payment button events

To integrate Amazon Pay into your website, you need to create a payment button and add event handlers to handle various payment events such as authorization, selection, and error.

First, create a payment button on your website using HTML and CSS. This button will allow customers to initiate the payment process. You can style the button according to your website's design.

<button id="amazonPayButton">Pay with Amazon</button>

Next, initialize the Amazon Pay SDK and add event handlers to the button using JavaScript. The SDK provides methods to handle payment events and capture necessary information.

// Initialize Amazon Pay SDK
amazonPaySdk.Button.render({
  // Specify the payment button ID
  merchantId: 'YOUR_MERCHANT_ID',
  sandbox: true, // Set to false for production mode
  paymentDescriptor: 'YOUR_PAYMENT_DESCRIPTOR',
  buttonId: 'amazonPayButton',
  onClick: function () {
    // Handle button click event
  },
  onError: function (error) {
    // Handle error event
  },
  onAuthorize: function (authorization) {
    // Handle authorization event
  },
  onPaymentSelect: function (payment) {
    // Handle payment selection event
  }
});

In the event handlers, you can perform actions based on the event type. For example, in the onClick handler, you can display a loading spinner or perform any necessary pre-processing before the payment is authorized. In the onError handler, you can display an error message to the user if there are any issues with the payment process.

In the onAuthorize handler, you can access the authorization object which contains information about the payment. You can use this information to update the order status or perform any post-processing tasks.

Similarly, in the onPaymentSelect handler, you can handle the event when the customer selects a payment method other than Amazon Pay.

By adding these event handlers, you can ensure that your website responds appropriately to different payment events and provides a smooth checkout experience for your customers.

This step is crucial for integrating Amazon Pay into your website as it allows you to handle payment events and interact with the Amazon Pay API to process payments and update order status.

Step 3: Building the checkout flow

To provide a seamless checkout experience for your customers, you need to guide them through the checkout process, fetch their information and shipping address, and display the order summary and available payment options.

First, you should create a clear and intuitive checkout flow on your website. This can include multiple steps, such as entering shipping and billing information, selecting shipping options, and reviewing the order details. Make sure to provide clear instructions and fields for customers to enter their information.

Next, you can use the Amazon Pay JavaScript SDK to fetch customer information and shipping address. This can be done by calling the appropriate SDK methods to retrieve the customer's name, email, and shipping address. You can then populate the corresponding fields in your checkout form with this information.

Once you have collected the necessary information, you can display the order summary to the customer. This should include the items they are purchasing, the total amount, any discounts or promotions applied, and any applicable taxes or shipping fees. This allows customers to review their order before proceeding to payment.

Finally, you can use the Amazon Pay JavaScript SDK to display the available payment options to the customer. This can include credit cards, stored payment methods, or even Amazon Pay itself. By providing a variety of payment options, you can cater to different customer preferences and increase conversion rates.

By building a smooth and user-friendly checkout flow, you can ensure a positive experience for your customers and increase the likelihood of successful transactions. The Amazon Pay JavaScript SDK provides the necessary tools to facilitate this process and make integration seamless.

Processing Payments with Amazon Pay

Once the customer has authorized the payment, the next step is to process the payment with Amazon Pay. This involves sending a payment authorization request to the Amazon Pay API and handling the response.

Step 1: Authorizing payments

To initiate the payment authorization, you need to prepare the payment request by providing the necessary information such as the order reference ID, amount, and currency. This can be done by retrieving the required information from your website's checkout flow.

Once you have the payment request ready, you can send it to the Amazon Pay API using the authorize method provided by the JavaScript SDK. This method takes in the payment request as a parameter and returns a promise that resolves with the authorization details.

amazon.Pay.authorize(paymentRequest)
    .then(function(response) {
        // Handle successful authorization
        console.log(response);
    })
    .catch(function(error) {
        // Handle error during authorization
        console.log(error);
    });

In the then block of the promise, you can handle the successful authorization by updating the order status and displaying a confirmation message to the customer. The response object will contain the authorization details, such as the Amazon Pay authorization reference ID.

In case of an error during the authorization process, the catch block will be executed. You can handle the error by displaying an error message to the customer or taking appropriate action based on the error type.

Step 2: Handling the payment capture

After the payment is authorized, you can capture the payment amount using the capture method provided by the JavaScript SDK. This method takes in the Amazon Pay authorization reference ID and returns a promise that resolves with the capture details.

amazon.Pay.capture(authorizationReferenceId)
    .then(function(response) {
        // Handle successful capture
        console.log(response);
    })
    .catch(function(error) {
        // Handle error during capture
        console.log(error);
    });

In the then block of the promise, you can handle the successful capture by updating the order status and displaying a confirmation message to the customer. The response object will contain the capture details, such as the Amazon Pay capture reference ID.

In case of an error during the capture process, the catch block will be executed. You can handle the error by displaying an error message to the customer or taking appropriate action based on the error type.

By following these steps, you can successfully process payments with Amazon Pay using the JavaScript SDK. This allows you to seamlessly integrate Amazon Pay into your website's checkout flow and provide a convenient payment option for your customers.

Step 1: Authorizing payments

To authorize payments using Amazon Pay, you'll need to prepare the payment request, send it to the Amazon Pay API, and handle the response to update the order status.

First, you'll need to prepare the payment request. This includes specifying the amount to be authorized, the currency, and any additional information required for the transaction. You can also include optional parameters such as seller note, soft descriptor, and custom information.

Once the payment request is prepared, you can send it to the Amazon Pay API for authorization. This involves making a request to the Authorize operation, passing in the necessary parameters such as the payment amount, seller ID, and Amazon Order Reference ID.

After sending the authorization request, you'll receive a response from the Amazon Pay API. This response will contain information about the authorization status, the authorization reference ID, and any error messages, if applicable.

You'll need to handle the response and update the order status accordingly. If the authorization is successful, you can mark the order as authorized and proceed with capturing the payment. If the authorization fails, you can handle the error and inform the customer about the issue.

It's important to handle any errors or exceptions that may occur during the authorization process to provide a seamless checkout experience for your customers.

Step 2: Handling the payment capture

After the customer authorizes the payment, the next step is to capture the payment amount. This ensures that the funds are transferred from the customer's account to your merchant account.

To capture the payment amount, you need to send a capture request to the Amazon Pay API. The capture request includes the authorization reference ID and the amount to be captured. Once the capture request is sent, you will receive a response from the API indicating the status of the capture.

// Prepare the capture request
var captureRequest = {
  amazonOrderReferenceId: 'ORDER_REFERENCE_ID',
  captureAmount: {
    amount: '10.00',
    currencyCode: 'USD'
  },
  sellerCaptureNote: 'Capturing payment for order'
};

// Send the capture request to the Amazon Pay API
amazonPayClient.capture(captureRequest, function(response) {
  if (response.error) {
    // Handle capture error
    console.log('Error capturing payment: ' + response.error);
  } else {
    // Handle successful capture
    console.log('Payment captured successfully');
    // Update order status based on the capture result
    updateOrderStatus(response.captureStatus);
  }
});

In the capture request, you need to provide the amazonOrderReferenceId which is obtained during the authorization process. Additionally, you need to specify the captureAmount which includes the amount to be captured and the currency code.

After receiving the capture response, you can handle any errors that may have occurred during the capture process. If the capture is successful, you can update the order status based on the captureStatus provided in the response. This will allow you to keep track of the payment status for each order.

By successfully handling the payment capture process, you can ensure a smooth transaction and provide a seamless experience for your customers.

Implementing Additional Features

Once you have successfully integrated Amazon Pay into your website using the JavaScript SDK, you can take advantage of additional features to enhance the payment experience for your customers. This section will guide you through implementing two key functionalities: offering subscriptions and recurring payments, and configuring refund and cancellation options.

Step 1: Offering subscriptions and recurring payments

To offer subscriptions and recurring payments with Amazon Pay, you need to set up a subscription service and handle recurring payments and cancellations.

First, configure the subscription service with Amazon Pay by specifying the subscription frequency and duration. This can be done through the Amazon Pay merchant portal or programmatically using the Amazon Pay API.

Next, handle recurring payments by setting up a mechanism to automatically charge customers at the specified intervals. You can do this by using the Amazon Pay API to initiate payment captures for each billing cycle.

Lastly, implement logic to handle subscription cancellations. When a customer cancels a subscription, you will receive a cancellation notification from Amazon Pay. Update the subscription status in your system accordingly and ensure that no further payments are processed.

Step 2: Configuring refund and cancellation options

To provide a seamless customer experience, it is important to handle refund and cancellation requests effectively.

When processing refunds for cancelled orders, use the Amazon Pay API to initiate a refund request. Specify the order ID and the amount to be refunded. Once the refund is processed, update the order status in your system to reflect the refund.

For cancellations and refund requests, implement a mechanism to handle customer requests and initiate the refund process. This can be done through your website's customer support portal or by providing a contact form for customers to submit their requests. Upon receiving a cancellation or refund request, initiate the refund process using the Amazon Pay API and update the order status accordingly.

By implementing these additional features, you can provide a more comprehensive payment experience for your customers, allowing them to easily manage subscriptions, cancel orders, and request refunds when necessary.

That wraps up the implementation of additional features with Amazon Pay. Now you have the tools to offer subscriptions, handle recurring payments, and manage refunds and cancellations effectively within your website.

Step 1: Offering subscriptions and recurring payments

To offer subscriptions and recurring payments using Amazon Pay, you need to set up the necessary configurations and handle the related operations. Here's how you can do it:

Set up subscriptions with Amazon Pay

To enable subscriptions, you need to configure your Amazon Pay account accordingly. This involves setting up the subscription period, pricing, and other details for your products or services. You can do this through the Amazon Pay merchant portal or by using the Amazon Pay API.

Handle recurring payments and subscription cancellations

Once subscriptions are set up, you need to handle recurring payments. This involves initiating payment requests at the specified intervals, such as weekly, monthly, or annually. You can use the Amazon Pay API to schedule these recurring payments and process them automatically.

In addition to recurring payments, you also need to handle subscription cancellations. When a customer cancels their subscription, you should update their subscription status accordingly and stop processing any future recurring payments. This can be done through the Amazon Pay API by making the necessary cancellation requests.

Update subscription status

It is important to keep track of the subscription status for each customer. This allows you to provide accurate information about active subscriptions, upcoming payments, and cancellation requests. You can retrieve and update the subscription status using the Amazon Pay API.

By offering subscriptions and recurring payments through Amazon Pay, you can provide a convenient and seamless experience for your customers. This allows them to easily manage their subscriptions and ensures that you receive regular payments for your products or services.

Step 2: Configuring refund and cancellation options

Once a customer cancels an order or requests a refund, you need to handle these actions appropriately and update the order status accordingly. Amazon Pay provides APIs that allow you to process refunds and cancellations seamlessly.

To process a refund for a cancelled order, you can use the Refund API provided by Amazon Pay. This API allows you to specify the order ID and the amount to be refunded. Once the refund request is sent, you will receive a response indicating whether the refund was successful or not. You can then update the order status in your system accordingly.

Handling cancellations and refund requests can be done by implementing event handlers for the respective actions. When a cancellation or refund request is initiated by the customer, you can capture the event using the appropriate event handler. This will allow you to handle the cancellation or refund request in real-time and update the order status accordingly.

Updating the order status after refunds or cancellations is crucial to maintain accurate records and provide a seamless customer experience. Make sure to update your system with the refund or cancellation details received from Amazon Pay. This includes updating the order status, updating any associated inventory or stock levels, and providing appropriate notifications to the customer about the status of their order.

By effectively handling refunds and cancellations, you can ensure that your customers have a positive experience when using Amazon Pay on your website. This will help build trust and loyalty, ultimately leading to increased customer satisfaction and repeat business.

Implementing refund and cancellation options with Amazon Pay is a key aspect of integrating the payment service into your website. By following this step, you can ensure smooth handling of refunds and cancellations, providing a seamless experience for both you and your customers.

Conclusion

In conclusion, integrating Amazon Pay with JavaScript SDK provides a seamless payment experience for your customers and offers several benefits for your website.

Throughout this article, we covered the integration process in detail. We started by setting up an Amazon Pay account and obtaining the necessary credentials and keys. Then, we installed the JavaScript SDK and configured it to initialize Amazon Pay on our website.

Next, we learned how to handle payment button events and build a smooth checkout flow for our customers. We processed payments by authorizing them and capturing the payment amount. We also explored additional features such as offering subscriptions and configuring refund and cancellation options.

By integrating Amazon Pay, you can enhance the user experience on your website by providing a trusted and familiar payment method. Customers can conveniently use their Amazon account information to complete their purchases quickly and securely. Additionally, Amazon Pay offers fraud protection and customer support, reducing the risks associated with online payments.

I encourage you to start integrating Amazon Pay into your own websites to streamline the payment process for your customers and boost your conversion rates. With the JavaScript SDK, the integration process becomes straightforward, allowing you to offer a seamless payment experience and increase customer satisfaction.