Javascript 爱奥尼亚5ios&；条带支付请求按钮-Stripe.js集成必须使用HTTPS

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

[警告]-您可以通过HTTP测试Stripe.js集成。然而， live Stripe.js集成必须使用HTTPS

我正在通过https加载条带API

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

我曾尝试在Mac上的Safari（使用--ssl和有效证书）、Xcode Emulator和真正的iPhone上运行它，结果总是一样的

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

 "iosScheme": "https",

更新：

---

因此，这是因为该应用程序使用本地urlScheme运行，即

capactor://

，而不是

https://

，并且爱奥尼亚公司的开发团队目前正在运行。有没有办法让付款请求按钮出现在非https环境中？

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

我绝对知道这是相当复杂的，但不幸的是，当不是 使用我们的官方iOS SDK，这个过程相当复杂，截至 目前我们还没有任何跨平台的官方支持 离子或天然反应等技术

您必须拥有apple开发者帐户、商户id以及上传至stripe的支付处理证书（请参阅的步骤1->3）

您可以使用cordova插件（）生成apple pay代币。然后，它将被提交到V1条带API并交换为条带令牌。这就是Stripe的官方IOS SDK如何将PKPayment对象标记为Stripe标记的工作方式

要传递到终点的参数（不在文件中）为：

• pk_标记（从base64解码 工资（数据）
• pk_令牌_支付_网络（paymentMethodNetwork）
• pk\令牌\仪器\名称（付款方式显示名称）
• pk\U令牌\U事务\U id（事务标识符）

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

调用此端点后，应返回标准条带 令牌对象（但如果您尚未注册 苹果支付处理证书（如上所述）。条纹 代币（tok_xxx）可以正常用于支付-最简单的方法是 通过使用调用/v1/payment\u方法将其转换为PaymentMethod 类型=卡和卡[令牌]=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');

---

您可能希望使用本机集成：@ceejayoz我曾尝试使用此方法，但多次得到未定义的方法-我不相信电容器实现达到与Cordova相同的标准-并且文档很少。从互联网上的教程/指南中可以看出，使用普通条带库也应该可以。您知道本机插件是否支持付款请求按钮吗？这可能是因为在显示您内容的iOS设备上运行的本地web服务器无法通过HTTPS提供具有有效证书的页面。配置中的

server.url

是否以

http

开头？如果你把它改成以https开头，它会坏吗？@MadMac我是这样做的，今天晚些时候我会在下面贴一个答案。简短的版本是，我必须使用stripes API的旧版本，手动生成令牌。@Lewis谢谢，这将非常有用。如果将来有人读到这篇文章，我确实使用了它，但是这需要更多的苹果/条纹证书等设置，所以我更喜欢使用带有付款请求按钮的网络版本

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