离子5 IOS & Stripe支付请求按钮- Stripe.js集成必须使用HTTPS

Question

我正试图在我的Ionic 5应用程序中添加一个付款请求按钮。然而，无论我如何运行应用程序，我总是收到以下消息，按钮不会显示。

警告--您可以通过HTTP测试您的Stripe.js集成。然而，活动Stripe.js集成必须使用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模拟器、一个真正的iPhone，结果总是一样的。

同样值得注意的是，我使用的是电容，而不是科多瓦。我在我的capacitor.config.json里试过这个，但是没有效果。

 "iosScheme": "https",

更新：

因此，这是因为这个应用程序运行的是本地的urlScheme of capacitor://，而不是https://和Ionic目前没有计划纠正这一情况的开发团队。是否有任何方法使支付请求按钮出现在非https环境中？

Answer 1

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

我绝对知道这是相当复杂的，但是不幸的是，当我们没有使用官方的iOS SDK时，这个过程是相当复杂的，而且到目前为止，我们还没有任何对跨平台技术的官方支持，比如Ionic或Reactinative.net。

您必须有一个苹果开发人员帐户，一个商人id，并有一个支付处理证书上传到stripe (参见https://stripe.com/docs/apple-pay#native的步骤1->3 )

您可以使用cordova插件(https://github.com/samkelleher/cordova-plugin-applepay#example-response)生成苹果支付令牌。然后，这将提交给V1条带API，并交换一个带令牌。这就是Stripe的官方IOS如何通过将PKPayment对象标记到Stripe令牌来工作的。

传递到终点的参数(不在文件中)是；

• pk_token (您从base64解码paymentData得到的字符串)
• pk_token_payment_netowrk (paymentMethodNetwork)
• pk_token_instrument_name (paymentMethodDisplayName)
• pk_token_transaction_id (transactionIdentifier)

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

一旦您调用了这个端点，您应该返回一个标准的Stripe令牌对象(但是如果您没有注册上面提到的Apple支付处理证书，请求就会失败)。Stripe (Tok_xxx)可以正常地用于支付--最简单的方法是通过使用type=card&cardtoken=tok_xxxx调用/v1/type=card&cardtoken=tok_xxxx_type=card&cardtoken=tok_xxxx将其转换为PaymentIntent，然后使用它来确认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');