javascript - Ionic 5 IOS 和 Stripe 支付请求按钮 - Stripe.js 集成必须使用 HTTPS

Question

我正在尝试添加 Payment Request Button到我的 Ionic 5 应用程序。但是，无论我如何运行应用程序，我总是会收到以下消息并且按钮不会显示。

[warn] - You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

我正在通过 https 加载 Stripe API

  <script src="https://js.stripe.com/v3/"></script>

我已将其导入我的页面

declare var Stripe;

// Check the availability of the Payment Request API first.
const prButton = elements.create('paymentRequestButton', {
    paymentRequest,
});

paymentRequest.canMakePayment().then(result => {
   if (result) {
       prButton.mount('#payment-request-button');
   } else {
       document.getElementById('payment-request-button').style.display = 'none';
   }

);

我尝试在 Mac 上的 Safari 中运行它(使用 --ssl 和有效证书运行)、Xcode Emulator、A Real iPhone，结果始终相同。
另外值得注意的是，我使用的是电容器，而不是 Cordova。我已经在我的电容器.config.json 中尝试过这个，但它没有效果。

 "iosScheme": "https",

更新:
所以事实证明这是因为应用程序使用本地 urlScheme 运行 capacitor://而不是 https://和 Ionic 的开发团队目前 have no plans to rectify this .有没有办法让支付请求按钮出现在非 https 环境中？

Answer 1

在与 Stripe 的支持团队反复多次后，我终于想出了一个解决方案。他们所说的很多内容都包含在这个答案中(放在大引号中)。我还包含了一个代码示例，希望有助于理解它。

I'm absolutely aware this is quite complex but unfortunately when not using our official iOS SDK the process is quite involved, and as of right now we don't have any official support for cross-platform technologies like Ionic or React Native.

您必须有一个苹果开发者账户、一个商家 ID 和一个上传到 Stripe 的支付处理证书(参见 https://stripe.com/docs/apple-pay#native 的步骤 1->3)
您可以使用 cordova 插件 (https://github.com/samkelleher/cordova-plugin-applepay#example-response) 来生成苹果支付 token 。然后，这将被提交给 V1 strip API 并交换为 strip token 。这就是 Stripe 的官方 IOS SDK 通过将 PKPayment 对象标记为 Stripe token 来工作的方式。
传递到终点的参数(不在文档中)是；

pk_token(你从base64解码得到的字符串
支付数据)

pk_token_payment_netowrk (paymentMethodNetwork)

pk_token_instrument_name (paymentMethodDisplayName)

pk_token_transaction_id (transactionIdentifier)

括号中的名称是使用 cordova 插件时返回的名称。

Once you call this endpoint, you should get back a standard Stripe token object(but the request will fail if you haven't registered your Apple Pay payment processing cert as mentioned above). The Stripe token(tok_xxx) can be used for payments as normal — the easiest way is to convert it to a PaymentMethod by calling /v1/payment_methods with type=card&card[token]=tok_xxxx , and then using it to confirm a PaymentIntent.

代码示例

completeApplePay(resp){
        const _this = this;

        return new Promise((resolution, rejection) => {
            $.post({
                url: 'https://api.stripe.com/v1/tokens',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer pk_test_xxxxxxxxxxxxxxxx")
                },
                data: {
                    pk_token: atob(resp.paymentData),
                    pk_token_payment_network: resp.paymentMethodNetwork,
                    pk_token_instrument_name: resp.paymentMethodDisplayName,
                    pk_token_transaction_id: resp.transactionIdentifier
                },
                success: function (data) {
                    resolution({
                       token: data.id
                    });
                }
            });
        });
    }

上面函数中的(resp)参数是cordova插件的响应；

const applePayTransaction = await this.applePayController.makePaymentRequest(order).then(resp => {
    this.stripe.completeApplePay(resp).then((stresp:any) => {
       // code goes here to store order in database etc
    })
});
await this.applePayController.completeLastTransaction('success');