0

What I am trying to do: I am trying to integrate Amazon Pay in my React-Express website following this documentation here.

My Problem: Whenever someone clicks on Amazon Pay Checkout Button, it redirects (refreshes the current page) to the Amazon Pay website to complete the payment. The problem in doing so is that, all the states get reset. What I am trying to do is, open it in a popup window.

Note: I have tried Googling, and there were very few information about it, and most of them says its not possible to do, but it is possible. This site here uses Amazon Pay and is built using React, AND this site is from Amazon itself for a demo. Here the Amazon Pay button opens a popup instead of refreshing, but I could not find the source code of this website anywhere.

My Progress:

In my backend Express server, this is what I did,

const payload = {
        storeId: AMAZON_STORE_ID,
        scopes: ["name", "email", "billingAddress"],
        deliverySpecifications: {
            specialRestrictions: ["RestrictPOBoxes"],
        },
        paymentDetails: {
            chargeAmount: {
                amount: account.price,
                currencyCode: 'EUR'
            },
        },
        // popup: true
    }

    const signature = amazonPayClient.generateButtonSignature(payload)

    console.log(`Sign: ${signature}`)

    return res.json({ sign: signature, payLoad: JSON.stringify(payload) })

and then in my frontend React,

amazon.Pay.renderButton('#amazon-pay', {
                // set checkout environment
                merchantId: config.AMAZON_MERCHANT_ID,
                publicKeyId: config.AMAZON_PUBLIC_KEY_ID,
                ledgerCurrency: 'EUR',
                checkoutLanguage: 'en_GB',
                productType: 'PayAndShip',
                placement: 'Checkout',
                buttonColor: 'Gold',
                createCheckoutSessionConfig: {                     
                    payloadJSON,
                    signature
                },
                popup: true
            })

Thanks for helping in advance :D

YTGS
  • 167
  • 1
  • 12
  • The modal on the demo page is something, that Amazon has set in their internal config. You might have noticed the "abTestV2" requests in the network section of your browser console. Whenever it says MAXO_MODALVIEW: "T1", the popup will be used. This is not available for merchants and nothing to rely on. You might want to contact Amazon Pay, if they can and will set your integration to permanently use popups. If that is not the path to go for you, I have a reliable workaround that I can share. – marcus.kreusch Mar 21 '22 at 10:09
  • 1
    Thanks @marcus.kreusch , I have contacted Amazon Pay Support right now :) – YTGS Mar 21 '22 at 11:49

1 Answers1

0

The reason, my Amazon Pay was opening in a new page, and the one in the Amazon Pay Demo website in a popup was because of currency. If, I change my currency from 'EUR' to 'USD', popup appears.

In the demo site, if you change your currency from USD to EUR from top right corner, you will see the changes take place.

So, to fix this issue, I just have to use US Region, and the USD currency

YTGS
  • 167
  • 1
  • 12
  • 1
    Just for anyone reading this answer: This is not a save behavior and nothing to rely on. Amazon may change this any time without giving notice. So don't use this in production environments. – marcus.kreusch Mar 24 '22 at 18:25