buttonConfig not populating correctly leading to Amazon Pay button not rendering

[webr]

Hi,

Since upgrading to Magento 2.4.5-p1 from 2.4.2, the Amazon Pay button on our shopping cart page fails to load:

Checking the developer console it tells us:

Amazon Pay button render error: AmazonPay:
Missing parameter 'merchantId' in the options object.
Missing parameter 'ledgerCurrency' in the options object.

I added some console logging to vendor/amzn/amazon-pay-magento-2-module/view/frontend/web/js/amazon-button.js to see what was in the options object, and found that checkoutSessionConfig appears to be seen as a string rather than an object:

{"merchant_id":"###","currency":"GBP","button_color":"Gold","language":"en_GB","sandbox":false,"login_payload":"{\"signInReturnUrl\":\"https:\/\/www.###.co.uk\/amazon_pay\/login\/authorize\/\",\"signInCancelUrl\":\"https:\/\/www.###.co.uk\/checkout\/cart\/\",\"storeId\":\"amzn1.application-oa2-client.17a50a9c421b4397904d20cfa83a8d84\",\"signInScopes\":[\"name\",\"email\"]}","login_signature":"jEMOE0gbHMlR0OHZm809VnRr6yMgVawpMRMcnfW5BKU5Dv3k+GXtnWn1tT5VM\/tmf9y1YJN0U9atgAwisj+YVkjbu51elaKsiiDK27Cxp3+gMGADxi7kaQmlqNke0dxUW1Oc1f+EZRfi+GjEqeyWddO8W2mMm6C3D7HAZCQ\/GxRsoPWudr33X8VLySzrmKAWPCHhO42lfyjHDGWgZEOpY50PnHX+lZ3MaG480TCTEDr+8JDhhpdwUAeWXq+dmLEHmOU2aZwBQWxJ65YfLLETNdltn0M6UQvTSzEd7tMFlOHa2f2BjXHPVTIWMTjgEpsAPrA6ch5J2g+nqnMvj2kLQw==","checkout_payload":"{\"webCheckoutDetails\":{\"checkoutReviewReturnUrl\":\"https:\/\/www.###.co.uk\/amazon_pay\/login\/checkout\/\",\"checkoutCancelUrl\":\"https:\/\/www.###.co.uk\/checkout\/cart\/\"},\"storeId\":\"amzn1.application-oa2-client.17a50a9c421b4397904d20cfa83a8d84\",\"scopes\":[\"name\",\"email\",\"phoneNumber\",\"billingAddress\"],\"deliverySpecifications\":{\"addressRestrictions\":{\"type\":\"Allowed\",\"restrictions\":{\"GB\":{}}}}}","checkout_signature":"R5py9ZQAcqCyQc\/Q9y2dtrIna47PiMhyVDVQ4VMPV1I47NswKYRSM8Xgn4Wq7AlWJS1voFS9rwCZhiuZvEvlDMlN2RJJ\/7CWmNeNDd9eJe2XxNKazvYk8njFhj31wcV335846ycMOoEz2XlqEDjY5eCJ7Po2rztdTpFIoASmnvh86b664Ytdq3TwZZw3ln91Jz\/lcf8RQ01SgpLutu+VBX8zgNQwOx0hOb7irgjhOAAoAcrykM\/1Gkswo8dC86PlYbLs+CXExMamnSd5aJG4iooeNs+XGYI6UXegANQDtbFoABljTm6Qh6pJhRQF6XvxmQOQ6glemihxxHw\/P3ieIA==","public_key_id":"###","pay_only":false,"paynow_payload":"{\"webCheckoutDetails\":{\"checkoutMode\":\"ProcessOrder\",\"checkoutResultReturnUrl\":\"https:\/\/www.###.co.uk\/amazon_pay\/checkout\/completeSession\/\",\"checkoutCancelUrl\":\"https:\/\/www.###.co.uk\/checkout\/cart\/\"},\"storeId\":\"amzn1.application-oa2-client.17a50a9c421b4397904d20cfa83a8d84\",\"scopes\":[\"name\",\"email\",\"phoneNumber\",\"billingAddress\"],\"paymentDetails\":{\"paymentIntent\":\"Authorize\",\"canHandlePendingAuthorization\":false,\"chargeAmount\":{\"amount\":12.95,\"currencyCode\":\"GBP\"},\"presentmentCurrency\":\"GBP\"},\"merchantMetadata\":{\"merchantReferenceId\":null,\"merchantStoreName\":null,\"customInformation\":\"Magento Version: 2.4.5-p1, Plugin Version: 5.14.1\"}}","paynow_signature":"dpGqitXOP8c3Vc3FAuTg3o2KtzWEfA\/MiukgauDmaoiB\/2P49I2aOa+KHcyjaI1h1lt\/YIKNyKBGAUW14P\/hz8vmQ6\/0o9iyji9UBgMj9ClBEFIbkXxbvzh5cIVdbNYyhmb8r5He3xDNTZASp9m0CnNlMYkmOJfGWBhJ8jLGkNjiENpmgP4CmDlLNdJ3BIv0WqAUsNWYKooNfM+R7LqfbCejvKly504UzWXeFTFfdKWh9khYOU66FEAuzUEGQ0CW2O6Z9JYCw8k2hLdZeyHswupL\/CGORc4cAvm+CG208y6zGIYPF+0oZxeMNSfIu6aTqiSm4sZxpQFhsww70TTe\/g=="}

This then means that all the values in the buttonConfig object are not set properly and are instead undefined, leading to the error seen in the console and on the frontend.

• Magento version: 2.4.5-p1
• Amazon Pay Extension Version: 5.14.1
• Magento Edition: Community

[sgabhart22]

Hello @webr ,

The returned checkoutSessionConfig object appears to be in the right format from what you posted; the payloads are typically strings, but it looks like all the other keys are standard JSON. Would you have a staging site available where we could take a closer look at the button rendering issue?

Thanks, Spencer

[webr]

@sgabhart22 Thanks for your reply Spencer.

Funnily enough I've just checked an old dev site (which is still on Magento 2.4.0) and the same thing is happening there. Could I share this and the production URL privately?

The reason I thought the checkoutSessionConfig object wasn't formatted correctly is because the console explicitly logged it as a string while it logged buttonConfig as an object:

All that is happening between the 2 points of logging is the setting of object values such as merchantId: checkoutSessionConfig['merchant_id'] leading me to believe the checkoutSessionConfig object cannot be read as intended.

[sgabhart22]

@webr Not a problem! And that is odd, certainly seems like something else may be to blame besides the upgrade. And yes, we can add you to our internal ticket for this issue and we can continue discussion there. Are you comfortable sharing an email here that we can use to add you to our Jira project? If not, you can email me directly at spencer@beargroup.com.

And that makes sense as well, I've had my share of confusion over the 'helpful formatting' the console sometimes displays. But I'd say you've drawn a fair conclusion. Looks like something is preventing the values returned by the /config call from being correctly translated into the payload used to render the button. At any rate, let us know how you'd like to proceed with communication and we'll be happy to help investigate.

Thanks, Spencer

[webr]

Thanks Spencer, have just sent an email.

[webr]

Closing this issue as the problem has been identified as originating from a linebreak introduced in the Amazon Pay SDK for PHP library, causing the content type of the JSON response to actually be interpreted as text/html:

https://github.com/amzn/amazon-pay-api-sdk-php/pull/35

[sgabhart22]

For anyone else that may run into this issue, a new version of the SDK has now been released; the changes are included in version 2.5.2 of the Amazon Pay API SDK for PHP. Updating should resolve the integration issues with the Magento module.