我需要在 React JS 中使用 Stripe.js 创建令牌，但我找不到任何简单的方法。在 node.js 我会做这样的事情：
stripeClient.tokens.create({
card: {
number: '4242424242424242',
exp_month: 12,
exp_year: 2050,
cvc: '123'
}
但是 Stripe npm 模块在 React JS 中对我不起作用。我收到错误：
无法解析模块“child_process”
既然这显然是节点库，我想使用
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
但我不确定在 React 中实现外部库的最佳实践是什么
【问题讨论】：
标签： reactjs npm stripe-payments child-process
您可以像过去那样添加任何其他客户端库一样继续添加它。
包含这个脚本标签：
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
然后使用它在代码中公开的全局变量。
import React from 'react';
// we didn't have to import stripe, because it's already
// in our global namespace.
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
它不如从 NPM 中要求它干净，但它可以正常工作。
【讨论】：
对于那些在 React 中使用 Stripe 时寻求指导的人：Accept Stripe Payments with React and Express 是一篇文章，其中包含在 React (create-react-app) 中的 Stripe 的直接实现以及处理您的支付请求和转发的最小 Express 服务器他们到 Stripe 平台。这篇文章尽量减少了样板文件，并附带了一个开源项目，您可以自行尝试。
【讨论】：
切换到 BrainTree
它们支持客户端 NPM 包，可以与 create-react-app (Webpack / Browserify) 一起使用：https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm
npm install --save braintree-web
不幸的是，Stripe 和 React 不能很好地结合在一起
Stripe on NPM 的版本仅供服务器端使用；因此，即使您对库进行 Webpack / Browserify（由 create-react-app 提供），也缺少用于配置公钥和标记信用卡信息的客户端功能。
对于客户端，Stripe 更喜欢从外部 URL 使用 "stripe.js"：https://js.stripe.com/v3/。不幸的是，外部 URL 并不适合 create-react-app - 例如，ES6 import 不能使用，并且外部文件没有被 Webpack 捆绑。此外，版本 (v3) 强制用户使用 elements 方法并查询 DOM（基本上与 React 背道而驰）。
【讨论】：
您可以在 html 文件中添加直接链接，但另一方面，即使没有要求，它也会每次加载。 所以我建议你通过你的代码添加条带库以保持 lazy lodaing 概念。
const script = document.createElement("script");
script.src = "https://js.stripe.com/v3/";
script.async = true;
document.body.appendChild(script);
然后
Stripe = Stripe('your keys').
在此之后Stripe.createToken('add any of your card element').then(setOutcome)
【讨论】：
请试试这个方法... 在公共 index.html 中
<script src="https://js.stripe.com/v2/"></script>
<title>React App</title>
</head>
在组件中
componentDidMount() {
if(window.Stripe.setPublishableKey){
window.Stripe.setPublishableKey('pk_test_LkK8cMTD4YXUImjZquRnAqXb');
}
}
它对我有用...
然后在调用 Stripe 方法时你只需要：
!window.Stripe.card.validateCardNumber(
【讨论】：