How to make Amazon Pay open in a popup window instead of refreshing?

618 Views Asked by At

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

1

There are 1 best solutions below

1
On BEST ANSWER

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