I'm using stripe's payment request button to display apple pay and google pay on my app: https://stripe.com/docs/stripe-js/elements/payment-request-button Done with domain verification and everything required to display apple pay and google pay buttons. Apple pay is working fine. Button is displaying correctly on safari.
But Google pay button isn't displaying. When i refresh the page where i'm showing 'Payment request button', google pay button starts showing, so it doesn't displays on first visit but starts displaying on refreshing the page. Once it displays it stays. But after clearing browser cache and cookies, button gets hidden again. Then it doesn't displays even after refreshing the page.
Google button is visible at top on this stripe page: https://stripe.com/docs/stripe-js/elements/payment-request-button#testing So that means no issue of browser compatibility. And i'm using real card on my app.
Also, When i visit this page: https://rsolomakhin.github.io/pr/pwg/ it shows 'No enrolled instrument' text in green. When i go back to above stripe link and click on google button and do a test payment, the green text on this page https://rsolomakhin.github.io/pr/pwg/ changes to 'Has enrolled instrument'. Then google button starts displaying again on my app too.
So, i think the problem is, payment request button api isn't detecting added card in google pay. But after doing any test google pay transaction on other website, some google data gets saved in cookies and cache and button starts working on my page too. But i want button to display every time, even after clearing browser cache. I have no idea what's going on. Any help?
Code:
function initializeStripeWalletPay() {
const paymentRequest = stripe.paymentRequest({
currency: CURRENCY,
country: CODE,
requestPayerName:true,
requestPayerEmail:true,
total: {
label: 'Total',
amount: total_amount
}
});
const prButton = elements.create('paymentRequestButton',{
paymentRequest: paymentRequest});
paymentRequest.canMakePayment().then((result) => {
if(result){ prButton.mount('#payment-request-button'); }});
}
$(window).load(function(){
initializeStripeWalletPay();
})