Hi, we have attempted to include Google Pay on our Square Payment form but I think there is an issue with methodsSupported. We have setup per instructions and are testing over HTTPS but we get back the following error message:
{googlePay: false}
payment:808 {type: “US_MERCHANT_ONLY”, message: “Wallet is available for US merchants only.”}
Is there something you need to do your end to allow Google Pay for your UK merchants?
Hey @pauld could you provide your application id and I’ll take a look on our end?
Thanks! Our Sandbox application id is sandbox-sq0idb-RQcNtxM8efz2Rr8Ugx7BPA and the location id is 6J3V1E5JDPGD2.
Looks like there may have been a hiccup on our side, and it should be resolved now. Could you try this again and let me know if it’s still not working?
We attempted the transaction again this morning. We get further this time, we click the Google Pay button that is generated and the Google Pay popup appears but has the error message ‘Unexpected developer error, please try again later.’
There are a number of error messages in the javascript console regarding scripts, not sure if these are causing the issue:
(unknown) Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘report-sample’ ‘nonce-x3BKLl/+rWA70GW8zDWd3w’ ‘unsafe-inline’”. Note that ‘unsafe-inline’ is ignored if either a hash or nonce value is present in the source list.
No error messages I can see on the Payment Form.
We have tried a very simple payment form with just Google Pay and the createPaymentRequest method:
createPaymentRequest: function () {
var paymentRequestJson = {
requestShippingAddress: false,
requestBillingInfo: false,
currencyCode: “GBP”,
countryCode: “GB”,
total: {
label: “OUTSAVVY”,
amount: “2.50”,
pending: false
}
};
return paymentRequestJson;
},
Not sure what else we can try. Have played around with all the configurations we can find.
Anything you can suggest we try?
Sorry to hear that! I tested with a UK location in sandbox just now, with your createPaymentRequest and it worked successfully for me. Are you still using sandbox? What browser are you testing in?
How odd. Can you try with our application id and location id I posted above? Yep still using sandbox, same id as before.
I forgot you posted that, my bad! I just tested again using your app id and location id, and it worked. I’m testing with our simply PHP test app, can you try with that just to see?
We use .NET as our programming language, is there a .NET example?
We are using the most basic example on one page and still get the error, there is nothing else on the page so not sure what else we can try? We are trying over an HTTPS connection in Chrome. Have tried other browsers as well:
<script type="text/javascript" src="https://js.squareupsandbox.com/v2/paymentform">
</script>
<div id="sq-walletbox">
<!-- Placeholder for Google Pay button-->
<button id="sq-google-pay" class="button-google-pay"></button>
</div><script type="text/javascript">
var paymentForm = new SqPaymentForm({
googlePay: {
elementId: 'sq-google-pay'
},
// Initialize the payment form elements
applicationId: "sandbox-sq0idb-RQcNtxM8efz2Rr8Ugx7BPA",
locationId: "6J3V1E5JDPGD2",
callbacks: {
methodsSupported: function (methods, unsupportedReason) {
var googlePayBtn = document.getElementById('sq-google-pay');
// Only show the button if Google Pay on the Web is enabled
if (methods.googlePay === true) {
googlePayBtn.style.display = 'inline-block';
}
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
var paymentRequestJson = {
requestShippingAddress: false,
requestBillingInfo: false,
currencyCode: "GBP",
countryCode: "GB",
total: {
label: "OUTSAVVY",
amount: "2",
pending: false
}
};
return paymentRequestJson;
},
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
try {
var errorMessage = '';
errors.forEach(function (error) {
errorMessage += '<p>' + error.message + '</p>';
});
showError();
return;
}
catch (err) {
ga('send', 'exception', {
'exDescription': "cardNonceResponseReceived -" + err.message,
'exFatal': false
});
showError();
return;
}
}
// Assign the nonce value to the hidden form field
document.getElementById('paymentmethodnonce').value = nonce;
document.getElementById('Form1').submit();
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function () {
}
}
});
</script>Yeah, very strange. I just copied over all of your code to my PHP example, and it still works fine. I’m just running on a local PHP server. Are you running locally? If not, could you try running locally just to see if it changes the behavior?
Tried it on our server and our local machines and all the same.
However, if we put the code onto a blank html page, i.e. not an aspx page, it works. There must be some configuration in the .net framework blocking it from working? I will try in a blank project next.
Morning, we tried in a blank .NET project (.net libraries version 4.8) with only the form on the page and we get the same error Unexpected developer error, please try again later. Have you tried on the .NET framework on your end? I will continue to try and workout what is blocking this but would be good to know if you have the same issue with the .NET framework.
Ok in the end it was something incredibly simple. After checking all the HTTP headers, checking if scripts are being blocked with Content Policies etc it was the fact that by default .NET treats an HTML button as a submit button so there is a postback. You have to set type=“button” to override the default NET behaviour so it doesn’t cause a postback. Always look for the most simple solutions first! Thanks for all your help.
Oh man! I’m so glad you figured that out, and thank you for sharing here in case someone else runs into it 