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

【问题标题】：Ionic 5 IOS & Stripe Payment Request Button - Stripe.js integrations must use HTTPSIonic 5 IOS 和 Stripe 支付请求按钮 - Stripe.js 集成必须使用 HTTPS
【发布时间】：2021-03-14 17:39:03
【问题描述】：

我正在尝试将Payment Request Button 添加到我的 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 Emulator、A Real iPhone 中运行它，结果始终相同。

另外值得注意的是，我使用的是电容器，而不是 Cordova。我已经在我的电容器.config.json 中尝试过，但没有效果。

 "iosScheme": "https",

更新：

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

【问题讨论】：

你想使用原生集成：ionicframework.com/docs/native/stripe
@ceejayoz 我曾尝试使用它，但反复得到未定义的方法——我不相信 Capacitor 的实现与 Cordova 的标准相同——而且文档很少。据我从互联网上的教程/指南中得知，使用普通的条带库也应该可以工作。你知道原生插件是否支持支付请求按钮吗？
这可能是由于运行在 iOS 设备上的显示您的内容的本地 Web 服务器无法通过 HTTPS 提供具有有效证书的页面。您的配置中的server.url 是否以http 开头？如果您将其更改为以https 开头，它会中断吗？
@MadMac 我做到了，我会在今天晚些时候有时间的时候在下面发布答案。简短的版本是，我必须使用旧的 v1 条纹 API 并手动生成令牌。
@Lewis 谢谢，这将非常有帮助。万一以后有人读到这篇文章，我确实使用github.com/capacitor-community/stripe 让它工作，但这需要使用苹果/条纹证书等进行更多设置，所以我更喜欢使用带有付款请求按钮的网络版本

标签： javascript ionic-framework stripe-payments

【解决方案1】：

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

我绝对知道这很复杂，但不幸的是，如果不是使用我们的官方 iOS SDK 这个过程是相当复杂的，并且截至目前我们还没有任何官方的跨平台支持 Ionic 或 React Native 等技术。

您必须有一个苹果开发者帐户、一个商家 ID 和一个上传到 Stripe 的支付处理证书（参见https://stripe.com/docs/apple-pay#native 的步骤 1->3）

您可以使用 cordova 插件 (https://github.com/samkelleher/cordova-plugin-applepay#example-response) 来生成 Apple Pay 令牌。然后，这将被提交给 V1 条带 API 并交换为条带令牌。这就是 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插件时返回的名称。

一旦你调用了这个端点，你应该得到一个标准的 Stripe 令牌对象（但如果你没有注册你的请求将失败如上所述的 Apple Pay 支付处理证书）。条纹 token(tok_xxx) 可以正常用于支付——最简单的方法是通过调用 /v1/payment_methods 将其转换为 PaymentMethod type=card&card[token]=tok_xxxx ，然后用它来确认一个付款意图。

代码示例

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

【讨论】：