GPay 按钮未出现在 Stripe Payment 中

Question

我正在尝试通过我的网页中的条纹集成 GPay，下面是代码片段。我可以使用 ngrok 使其在我的本地主机中可见，在开发环境中显示相同，但是在 QA 中它没有显示。我已经验证了代码，它在所有这些环境中都存在并且相同。

            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';
                }
            });

我的本地机器用于测试
OS: Mac OS BigSur 11.6
浏览器：Chrome 版本 96.0.4664.110
三个环境下Stripe的npm包我都验证过了，是一样的

我在质量检查中遇到的错误是

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)

在本地主机和 Dev 的 div 支付请求按钮中注入了一个 iframe 元素，但 QA 中没有发生这种情况。

我已经验证了 Dev、QA 和本地主机的浏览器特定站点设置权限似乎都是正确的并且启用了允许付款。

请帮助我，我被困在这里没有任何线索。

Answer 1

问题出在 nginx header 上。开发环境没有这个设置，QA 有这个。这里的付款被标记为 () & 当我通过添加 * 将其更改为接受所有时它开始工作。

add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=(*)";

GPay 按钮未出现在 Stripe Payment 中

GPay button not appearing in Stripe Payment

javascript

stripe-payments

google-pay