Pay with Amazon, Not displaying the GetOrderReferenceDetails();

Question

I am missing something, but I can't figure out what. I am implementing the Pay with Amazon on my website and have followed their implementation guide step by step, but I am still having issues.

I have get the address and wallet widget to render, but instead of looking like , instead it looks like

I am trying to get the order details so that when the address is selected the shipping options show and then the cart when the payment option is selected.

But I am having no luck. I have researched various sites and documentation and they all say the same, I can't see where I am going wrong.

Here is the address widget:

     <div id="addressBookWidgetDiv" style="width:400px; height:240px;padding-top:20pt"></div>

        <script>
new OffAmazonPayments.Widgets.AddressBook({
  sellerId: 'SELLER_ID',
  onOrderReferenceCreate: function(orderReference) {
    orderReference.getAmazonOrderReferenceId();
  },
  onAddressSelect: function(orderReference) {
            GetOrderReferenceDetails();

  },
  design: {
    designMode: 'responsive'
  },
  onError: function(error) {
    // your error handling code
  }
}).bind("addressBookWidgetDiv");
</script>

Here is the wallet:

<div id="walletWidgetDiv">
</div>
<script>

new OffAmazonPayments.Widgets.Wallet({
  sellerId: 'YOUR_SELLER_ID_HERE',
  onPaymentSelect: function(orderReference) {
    // Replace this code with the action that you want to perform
    // after the payment method is selected.
  },
  design: {
    designMode: 'responsive'
  },
  onError: function(error) {
    // your error handling code
  }
}).bind("walletWidgetDiv");
</script>

Any help would be appreciated.

Thanks.

Where is GetOrderReferenceDetails() defined in 'onAddressSelect' and what does it do? — Brent D., Jul 24 '15 at 21:30

score 7 · Accepted Answer · answered Jul 24 '15 at 21:45

The "Court & Cherry" screen shot you posted is a sample checkout page. Login and Pay with Amazon gives you the ability to render the "Pay" button and the Address Book and Wallet widgets. It is up to you to build the shipping section and also calculate the shipping (along with tax if it applies). This is why most people tend to use a solution provider such as Magento, OpenCart, WooCommerce, etc. because they all calculate this for you.

As for GetOrderReferenceDetails you will typically make a AJAX call to your back-end which, in turn, makes the API call. You should then parse the response to get the shipping address and then update your shipping block appropriately. This call should be made in the 'onAddressSelect' method of the Address Book Widget. Note: This method is fired once automatically when the widget renders.

You should use one of the Pay with Amazon SDKs to perform these API calls. You can find them on Amazon's GitHub Page. PHP, Ruby, Python, Java, C#. I am the author of the Python SDK.

Thanks, that was a great explanation. I use bigCommerce as my eCommerce. I am way over my head on this one, I don't think I could do it using BigCommerce, but I will keep working at it. — Jose M., Jul 24 '15 at 23:28

Pay with Amazon, Not displaying the GetOrderReferenceDetails();

1 Answers1