GPay 按钮未出现在 Stripe Payment 中

Question

我正在尝试在我的网页中通过条带集成 GPay，下面是代码片段。 我可以使用 ngrok 在我的 localhost 中使其可见，在开发环境中显示相同，但是在 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';
                }
            });

我用于测试的本地机器
操作系统：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)

有一个 iframe 元素被注入到 localhost 和 Dev 的 div payment-request-button 中，但这在 QA 中没有发生。

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

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

Answer 1

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

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