Connect Amazon Pay Button with Amazon Pay Widget

[hiren-ganatra]

We are using React based checkout provided by big commerce to customize few things in checout page , here is the link of our website : https://www.babiesgetaway.com/

Now, for amazon pay button we have used one npm package as bigcommerce button initializer doesn't support amazon pay button initialization.

for amazon pay widget , we are using the default initializePayment service of big commerce :

this.service.initializePayment({ methodId: 'amazon', amazon: { container: 'walletWidgetDiv', onReady:this.amazonOnReady, onPaymentSelect:this.amazonOnPaymentSelect, onError:this.amazonOnError } })

Now, we are able to login & get the access_token via amazon pay button but when customer selects the "amazon pay" as an payment option , amazon pay widget is throwing error "buyer's session is expired"

so how do we connect amazon pay button with its widget ?

[davidchin]

Hi @hiren-ganatra, I'm not sure if it'd work if you just pull in a library from npm as its version might not be compatible with the version we're using.

Anyway, I believe you can initialise the Amazon Pay login button using initializeCustomer method. i.e.:

service.initializeCustomer({
    methodId: 'amazon',
    amazon: {
        container: 'amazon-button'
    }
});

That will render an Amazon Pay login button in the specified container. Hopefully that would resolve your session issue.

[hiren-ganatra]

Hi David,

We have tried applying your suggestions and some how amazon pay button is not getting initialized and showing us below error :

here is the code we are using : componentDidMount() { Promise.all([ this.service.loadCheckout(), this.service.loadShippingCountries(), this.service.loadShippingOptions(), this.service.loadBillingCountries(), this.service.loadPaymentMethods(), this.service.initializeCustomer({ methodId: 'amazon', amazon: { container: 'AmazonPayButton', } }), ]).then(() => { this.unsubscribe = this.service.subscribe((state) => { this.setState(state); const { data, errors, statuses } = this.state; }); }); }

[davidchin]

Hi @hiren-ganatra, it seems to me that the container (with AmazonPayButton element ID) doesn't exist when the method is called. In order for the button to be inserted into the container, you have to make sure that the container is actually present in the DOM before calling the method. I hope this helps :)

[hiren-ganatra]

Hi @davidchin ,

Thanks for the reply and yes we are able to initialize the amazon pay button with this.service.initializeCustomer

once customer logs in via amazon pay button then some how shipping options are not appearing on checkout page.

In the "scope" parameter it is passing "payments:billing_address payments:shipping_address payments:widget profile" and i think it should use "payments:widget profile"

I have tried to pass the scope while initializeCustomer like below :

this.service.initializeCustomer({ methodId: 'amazon', amazon: { container: 'AmazonPayButton', options:{ scope: 'payments:widget profile' } } });

and also this.service.initializeCustomer({ methodId: 'amazon', amazon: { container: 'AmazonPayButton', scope: 'payments:widget profile' } });

Is scope parameter causing the issue ? if yes how do i pass the scope & if no , please let us know your suggestions.

Thanks again for showing us the way to initialize the amazon button without using npm package and we are looking to eleminate the npm package.

:)

[bg2492]

Hi @davidchin I am also having the same issue as hiren above. Can you please help!?

[davidchin]

Hi @hiren-ganatra, the scope property we send to Amazon is correct. I think the user has to first select an address from the Amazon shipping widget (which can be initialised by calling initializeShipping). If the store is able to ship to that address (according to the shipping zones configured by the merchant), you will be able to retrieve a list of available shipping options.

[hiren-ganatra]

Hi @davidchin ,

Thanks for the reply and we have tried to use amazon address widget with the use of initializeShipping and here is our code for the same :

componentDidUpdate(){
        if(!this.state.amazonButtonInitialized){
            const { data, errors, statuses } = this.state;
            this.service.initializeCustomer({
                methodId: 'amazon',
                amazon: {
                    container: 'AmazonPayButton'
                }
            });
            this.setState({ amazonButtonInitialized: true });
            this.service.initializeShipping({
                methodId: 'amazon',
                amazon: {
                    container: 'AmazonAddressBook'
                }
            });
            console.log('getInitializeShippingError',errors.getInitializeShippingError());
        }
    }

and in the console we are getting : "getInitializeShippingError undefined"

As per the above screenshot the address widget is initialized but in the iframe src is unknown

So , what we are missing to initialize the address widget ? Please let us know your suggestions.

Thanks again for guiding us to connect amazon pay with our website :)

[davidchin]

Hi @hiren-ganatra, I think in order for initializeShipping to succeed, the shopper must be logged into Amazon first. This is because the Amazon address book widget is responsible for displaying the available shipping addresses for a particular shopper. If the shopper is not logged in, there's nothing to display.

[flyingL123]

Hi @davidchin - I'm currently building a custom checkout in Vue using the sdk. It's working great, but I'm running into an issue trying to hook up Amazon Pay. I am able to get the login button to display. When I click it and login to Amazon, I am redirected back to my actual live website, not my local stencil version.

How do you recommend telling Amazon to redirect me back to the domain from which the request came? In this case, localhost:3000. Is this possible?

Also, just to clarify, I have already added localhost as an allowed origin and return url within my Amazon account. I just don't know how to get the sdk to stop hardcoding my domain as the redirect url.

[flyingL123]

I just realized this doesn't even work on the standard BigCommerce optimized single-page checkout. It still redirects to the live website.

How are we supposed to develop this functionality if it won't redirect back to the localhost url?

[cwill833]

If we are able to get the widgets to appear on the checkout - how do we extract the information and submit payment if card and address is selected inside of the iframe provided by amazon?