I am trying to integrate amazon pay payment gateway to my MVC application using https://github.com/amzn/amazon-pay-api-sdk-dotnet .I could do the server side coding successfully by following the steps provided however paybutton is not rendering properly in my view. when i am inspecting I'm seeing like this
i can see some issues in console related cross site and not sure because of this its blocking the button to render.I am running the application in https://localhost:44350/ and same added as javascript origin in seller portal.
Also i tried to confirm the cross site issue, i have created a button in seller portal and added the code in my view it render properly with the same console error.
if anyone can help me to know the issue or at least how to add an error handler to the amazon render function would be appreciated.
<div id="AmazonPayButton"></div>
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: '@ViewBag.MerchantId',
publicKeyId: '@ViewBag.PublicId',
ledgerCurrency: 'USD',
// customize the buyer experience
checkoutLanguage: 'en_US',
productType: 'PayAndShip',
placement: 'Cart',
buttonColor: 'Gold',
// configure sign in
createCheckoutSessionConfig: {
payloadJSON: '@ViewBag.PayLoad', // string generated in step 2
signature: '@ViewBag.Signature' // signature generatd in step 3
}
})
<script>
You didn't share much of the code that you're using to generate what is being passed to your renderButton, but with these types of errors where the button isn't rendering at all, I'd recommend taking a step back and ensuring all the correct parameters are being supplied. You can use the developer scratchpad as a way to validate your button configuration, as well as ensure the button renders properly, test that it functions after click and get both html and .net code snippets generated for you.
https://pay-api.amazon.com/tools/scratchpad/index.html

Be aware that the Amazon Pay API's do not support client side requests (you'll get CORS errors), so any API requests being made will need to happen server side.