如何使用 Stripe (stripe.js) 和 react-native

Posted 2023-03-21

【中文标题】如何使用 Stripe (stripe.js) 和 react-native

【英文标题】：how to use Stripe (stripe.js) and react-native

【发布时间】：2016-03-31 18:03:54

【问题描述】：

我正在尝试找到一种将条带与 react-native 结合使用的好方法。最好是不涉及将信用卡详细信息发送到我自己的后端或将我的条带私钥存储在应用程序中的一种。欢迎任何想法！谢谢

【问题讨论】：

您是想只用它来为用户添加信用卡，还是想用它做更多事情？

现在只是为用户添加信用卡 - 我很高兴能够访问我自己的后端，据我所知，这是 Stripe 推荐的模式？

这是我在我的应用程序中设置它的方式，因为创建实际交易需要私有 API 密钥，因此我不惜一切代价避免将其发送到客户端应用程序。

是的 - 有道理。非常感谢您的帮助。

官方的 Stripe 节点模块 (github.com/stripe/stripe-node) 不适用于 React-Native，因为它依赖于 RN 没有的 http 模块。这篇博文提供了一个解决方案：blog.bigbinary.com/2015/11/03/…，github.com/llanox/react-native-stripe-wrapper 上还有另一个模块可以提供帮助，但是这两种方法都不像 stripe.js 那样简单。

【参考方案1】：

我个人还没有在 React Native 中实现这个。在我正在开发的应用程序中，这将在接下来的几天内被移植，但这里是我们在当前应用程序中如何在不依赖第三方库的情况下执行此操作，以及我们将如何在 React Native 中实现。这显然只是一个可以在任何可以进行 HTTP 调用的地方使用的概念。

使用值为Bearer PUBLISHABLE_AUTH_TOKEN 的“授权”标头对https://api.stripe.com/v1/tokens 进行POST 调用。在正文(x-www-form-urlencoded) 放：

card[name]=NAME_ON_CARD&card[number]=CARD_NUMBER&card[exp_month]=CARD_EXP_MONTH&card[exp_year]=CARD_EXP_YEAR&card[cvc]=CARD_CVC

响应将是一个 JSON 对象，其中包含（除其他外）一个 id 字段。此 id 字段是您在进行交易时将引用卡的内容，因此此 ID 需要发送到您的服务器并存储。无需担心 PCI 合规性即可存储此 ID。

更多信息：https://stripe.com/docs/api#tokens

【讨论】：

你好。我在试图弄清楚如何在 React Native 中实现 Stripe 时遇到了这个问题。如果你能看看这个问题，我将不胜感激：***.com/questions/40092731/…提前谢谢你！

如果您能抽出时间通过这里聊天，我将不胜感激。目前正在将 Stripe 集成到 React Native 中，并且想澄清一些事情。提前谢谢你。

这太棒了。然后我怎样才能以同样的方式完成付款？调用什么路由，带什么参数等等？

【参考方案2】：

我在使用现有库时遇到了问题，所以我写了一个更好的库。 react-native-stripe 允许您收集信用卡信息，使用 Stripe 对其进行验证，并将其交换为 Stripe 令牌，所有这些都使用本机代码。目前仅限 ios。

【参考方案3】：

我推荐：https://github.com/tipsi/tipsi-stripe

我能够成功连接 React Native 和 Stripe 以创建客户并添加卡片并将令牌保存到我的后端。

【讨论】：

您是如何将卡添加到客户的？从 RN 本身还是通过将令牌传递到您的后端？

@SuhairZain - 将令牌传递到后端。

好吧，与github.com/sonnylazuardi/react-native-credit-card相比，这个包装器的用户体验实际上相当糟糕。没有过渡或指示符来告诉您选择了哪种类型的卡。

我对使用第三方库来处理付款感到不安，但我会这样做只是为了让事情进展顺利，也许以后会切换。 Stripe 的 JS 库在 React Native 中不起作用，这有点荒谬。也许他们会像 Google 对 Firebase JS 所做的那样修复它。

Beau Smith 在 react native 中是如何处理条带后端的？我生成了令牌，但我现在不知道该怎么办？

【参考方案4】：

我仍然不确定，但我们想要实现的目标很简单。

使用 react，我们可以通过从前端调用 stripe 来获取卡片信息来实现这一点。但是，React Native 没有自己的代码。

所以我们需要自己获取所需的一切像这样

curl https://api.stripe.com/v1/tokens \
  -u sk_test_IjzBJWterND0tgdSyEIhDmgS00ODHLjw1a: \
  -d "card[number]"=4242424242424242 \
  -d "card[exp_month]"=7 \
  -d "card[exp_year]"=2021 \
  -d "card[cvc]"=314

你会得到

% curl https://api.stripe.com/v1/tokens \
  -u sk_test_IjzBJWterND0tgdSyEIhDmgS00ODHLjw1a: \
  -d "card[number]"=4242424242424242 \
  -d "card[exp_month]"=7 \
  -d "card[exp_year]"=2021 \
  -d "card[cvc]"=314

  "id": "tok_1H2Vt9AxSyQJWoao8qhjHDuh",
  "object": "token",
  "card": 
    "id": "card_1H2Vt9AxSyQJWoao26em4Dps",
    "object": "card",
    "address_city": null,
    "address_country": null,
    "address_line1": null,
    "address_line1_check": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": null,
    "brand": "Visa",
    "country": "US",
    "cvc_check": "unchecked",
    "dynamic_last4": null,
    "exp_month": 7,
    "exp_year": 2021,
    "fingerprint": "IS61beTzZemIdd8p",
    "funding": "credit",
    "last4": "4242",
    "metadata": 
    ,
    "name": null,
    "tokenization_method": null
  ,
  "client_ip": "153.218.66.247",
  "created": 1594186331,
  "livemode": false,
  "type": "card",
  "used": false

您可以使用卡上的tok_照常实施后端收费。