使用 React JS 条纹

Question

我需要在 React JS 中使用 Stripe.js 创建令牌，但我找不到任何简单的方法。在 node.js 我会做这样的事情：

   stripeClient.tokens.create({
      card: {
        number: '4242424242424242',
        exp_month: 12,
        exp_year: 2050,
        cvc: '123'
      }

但是 Stripe npm 模块在 React JS 中对我不起作用。我遇到错误：

Cannot resolve module 'child_process'

因为这显然是节点库，所以我想使用

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

但我不确定在 React 中实现外部库的最佳实践应该是什么

Answer 1

您可以像添加任何其他客户端库一样继续添加它，就像您过去所做的那样。

包括这个脚本标签：

<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 要求它那么干净，但它会工作得很好。

Answer 2

对于那些在 React 中使用 Stripe 时寻求指导的人：Accept Stripe Payments with React and Express 是一篇文章，其中包含 React 中 Stripe 的直接实现（create-react-app）和一个最小的 Express 服务器来处理您的支付请求并将它们转发到 Stripe 平台。本文将样板文件保持在最低限度，并附带一个您可以自己尝试的开源项目。

Answer 3

切换到 BrainTree
他们支持可以与 create-react-app (Webpack / Browserify): https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm

一起使用的客户端 NPM 包

npm install --save braintree-web

不幸的是，Stripe 和 React 不能很好地结合在一起
Stripe on NPM 的版本仅供服务器端使用；因此，即使您使用 Webpack / Browserify 库（由 create-react-app 提供），客户端功能也可以配置 public-key 并标记信用-卡片信息缺失。
对于客户端，Stripe 更喜欢从外部 URL 使用 "stripe.js"：https://js.stripe.com/v3/。不幸的是，外部 URL 不太适合 create-react-app - 例如，ES6 import 不能使用，并且外部文件未被 Webpack 捆绑。此外，版本 (v3) 强制用户使用 elements 方法并查询 DOM（基本上与 React 背道而驰）。

Answer 4

您可以在 html 文件中直接添加 link，但另一方面，即使没有要求，它也会每次加载。所以我建议你通过你的代码添加条带库以保持 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)

Answer 5

请试试这个方法... 在publicindex.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(

使用 React JS 条纹

Stripe with React JS

child-process

npm

stripe-payments

reactjs