Hello,
I'm trying to create hosted iframe that includes GPay button. Here's my code:
<div id="payment-request-button" style="width: 300px; height: 40px;"></div>
...
<script>
const paymentReqData = {
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
//amount: document.getElementById('amount_id').value * 100,
amount: 101
},
requestPayerName: true,
requestPayerEmail: true,
// Default buttonType is 'long' for button with card brand & last 4 digits (or short)
options: {
button: {
buttonType: 'pay' // For button without additional text
}
}
};
const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
paymentReqData
});
paymentRequestButton.mount('#payment-request-button');
paymentRequestButton.addEventListener('paymentMethod', function (tokenData) {
str = JSON.stringify(tokenData);
console.log('tokenData!: ' + str);
});
</script>
It almost works - GPay button is rendering, GPay pop-up showing up when button is pressed and let me select payment method. At the very last step when I press 'Continue' in GPay pop-up I see the code attempts to do POST to https://token-sandbox.dev.clover.com/v1/tokens and it fails with the following error in firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://token-sandbox.dev.clover.com/v1/tokens. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.
Chrome shows the following:
Access to fetch at 'https://token-sandbox.dev.clover.com/v1/tokens' from origin 'https://checkout.sandbox.dev.clover.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
account-address-element_19.entry.js:14
POST https://token-sandbox.dev.clover.com/v1/tokens net::ERR_FAILED 500 (Internal Server Error)
In both cases tokenData object is returned empty.
Can please somebody help?
Thanks,
Michael
