使用 React Native 在应用程序内构建“Stripe-subscriptions-checkout”的推荐方法是什么？答案

【问题标题】：What is the recommended way to build "Stripe-subscriptions-checkout" inside app using React Native?使用 React Native 在应用程序内构建“Stripe-subscriptions-checkout”的推荐方法是什么？
【发布时间】：2021-11-12 20:32:13
【问题描述】：

我正在关注此文档https://stripe.com/docs/billing/subscriptions/checkout。有什么办法，我可以直接使用https://github.com/stripe/stripe-react-native中的一些组件，还是只能使用Webview？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： react-native stripe-payments

【解决方案1】：

您需要将 Stripe 文档中的一些不同指南拼接在一起：

a/ 订阅创建步骤发生在您的后端，因此您在此处执行步骤 1 到 5：https://stripe.com/docs/billing/subscriptions/elements#install-setup

该指南的其余部分使用 Stripe Elements，您将不会使用它，您将用它代替 ReactNative。

通过该文档中的第 5 步，您将创建一个订阅（在 status "incomplete" 中，您需要支付其第一个 PaymentIntent 以将订阅移动到 status: "active"）

b/ 按照本指南将 CardField 或 CardForm 集成到 ReactNative 中：https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom

此文档向您展示了一次性付款的服务器端 sn-ps，请忽略这些，因为您已经完成了第 1 步/。

集成该指南中的 ReactNative 客户端代码，在步骤 4/ 中，您将确认上述 a/ 中的 PaymentIntent 的 client_secret。

【讨论】：

【解决方案2】：

Stripe Checkout（您的第一个链接）与 Stripe React Native（用于在应用程序中添加支付 UI 元素的库）完全不同。

条纹Checkout:

是一个托管网站（位于 checkout.stripe.com），您的客户通过输入他们的地址、付款方式数据等来完成购买。
有点，但不是很可定制。

条纹React Native:

是 Stripe 的 SDK 之一，在您的原生代码中提供 UI 元素和功能
为您提供元素以添加到您的应用程序中

这两种集成 Stripe 的方法各不相同，Checkout 无法在您的应用中显示，您需要使用 WebView。

对于您的情况，我建议您关注 this guide 而不是 Checkout 以使用 React Native 元素和 SDK。

【讨论】：

这是一次性付款。我想要订阅。