I'm trying to integrate GPay through stripe in my webpage, below is the code snippet. I'm able to make it visible in my localhost using ngrok, the same is displayed in the dev environment, however in QA it is not getting displayed. I've verified the code and it is present & the same in all these envs.
this.stripe = new Stripe(Constants.STRIPE_KEY, { apiVersion: '2020-03-02' });
console.log('stripe object created initStripe = '+JSON.stringify(this.stripe));
const elements = this.stripe.elements();
console.log("before payment request")
var paymentRequest = this.stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: this.paymentData.service_name,
amount: this.paymentData.price * 100,
},
requestPayerName: true,
requestPayerEmail: true,
});
console.log("before payment create ")
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
console.log("Check the availability of the Payment Request API first")
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function (result) {
console.log("before result")
console.log("result:=" + result);
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
My local machine used for testing
OS: Mac OS BigSur 11.6
Browser: Chrome Version 96.0.4664.110
I've verified the npm packages for Stripe in all the three environments, it is the same.
The error I'm getting in QA is
Uncaught DOMException: Failed to construct 'PaymentRequest': Must be in a top-level browsing context or an iframe needs to specify 'allowpaymentrequest' explicitly
at https://pay.google.com/gp/p/js/pay.js:277:404
at https://pay.google.com/gp/p/js/pay.js:277:815
(anonymous) @ pay.js:277
(anonymous) @ pay.js:277
pay.js:255 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'then')
at Y.F (pay.js:255)
at Z.m.F (pay.js:275)
at e.isReadyToPay (payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1)
at payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
at C (payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1)
at e.canMakePayment (payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1)
at payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
Y.F @ pay.js:255
m.F @ pay.js:275
isReadyToPay @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
(anonymous) @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
C @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
canMakePayment @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
(anonymous) @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
Promise.then (async)
(anonymous) @ payment-request-inner-google-pay-ab02e38f805f4de39ac6b3aeb26b9a11.js:1
(anonymous) @ shared-7d090405249c9f155033cb888300fb51.js:1
_emit @ shared-7d090405249c9f155033cb888300fb51.js:1
value @ shared-7d090405249c9f155033cb888300fb51.js:1
value @ shared-7d090405249c9f155033cb888300fb51.js:1
value @ shared-7d090405249c9f155033cb888300fb51.js:1
(anonymous) @ shared-7d090405249c9f155033cb888300fb51.js:1
m=IZT63,ws9Tlc,p8L0ob,vfuNJf,PrPYRd,Ru0Pgb,hc6Ubd,ZyYHPb,Das5Le:360 TypeError: Cannot read properties of undefined (reading 'includes')
at Ed.h (m=IZT63,ws9Tlc,p8L0ob,vfuNJf,PrPYRd,Ru0Pgb,hc6Ubd,ZyYHPb,Das5Le:361)
at Gd (m=_b,_tp:41)
at Id.next (m=_b,_tp:42)
at m=_b,_tp:42
at new Promise (<anonymous>)
at Jd (m=_b,_tp:42)
at Object._.Kd (m=_b,_tp:42)
at EW (m=IZT63,ws9Tlc,p8L0ob,vfuNJf,PrPYRd,Ru0Pgb,hc6Ubd,ZyYHPb,Das5Le:360)
at Ed.h (m=IZT63,ws9Tlc,p8L0ob,vfuNJf,PrPYRd,Ru0Pgb,hc6Ubd,ZyYHPb,Das5Le:360)
at Gd (m=_b,_tp:41)
There is an iframe element getting injected in the div payment-request-button in localhost & Dev, but that is not happening in QA.
I've verified the browser specific site settings permission for Dev, QA & localhost all seems to be correct & Allow payment is enabled.
Kindly help me, I'm stuck here without any clue.
The issue was with the nginx header. The dev env did not have this setting & QA had this. Here the payment was marked as () & when I changed it to accept all by adding * it started working.
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=(*)";