如何在 React 组件中添加 Stripe.js 脚本

Question

我想创建一个使用Stripe 作为支付提供商的支付表单。

在Stripe.js Reference 中，使用jQuery 描述了创建表单组件的过程，包括页面中的外部脚本。如何将它包含在我的 React 组件中？什么是最好的方法？到目前为止，我有以下几点：

import React, { Component } from 'react';

class PaymentForm extends Component {
 constructor(props) {
  super(props);
 }

 componentDidMount() {
   Stripe.setPublishableKey('THE-PUBLIC-KEY');
 }

 handleSubmit(e) {
   e.preventDefault();
   Stripe.card.createToken(e.currentTarget, (status, response) => {
    console.log( status, response );
   });
 }

 render() {
   //THE PAYMENT FORM
 }
}

注意1：我不想使用ReactScriptLoader，因为它没有主动更新。

注意 2：还看到了 dangerouslySetInnerHTML 解决方案，我认为这不是一个好习惯。

Answer 1

Stripe 已正式发布了带有 React 组件的 react-stripe-elements 模块，可帮助您将 Stripe Elements 添加到您的 React 应用程序中。

Answer 2

虽然 Stripe 有一个 NPM module，但它们不支持将它用于客户端应用程序。您必须通过 script 标签将 stripe.js 库添加到您的 index.html 页面（或者您生成 React 将挂载到并导入 React 脚本的 HTML 元素的任何位置）：

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

这是来自Stripe documentation 的推荐方法。它将在全局范围内创建 Stripe 对象，您的 React 代码可以在其中访问它。

我会非常谨慎地使用库进行支付，而不是其开发人员支持的方式 - 认为您为此目的避免使用 ReactScriptLoader 和 dangerouslySetInnerHtml 是正确的。

如果你使用 ESLint，你可以在 JSX 文件的顶部指定一个全局来停止警告：

/* global Stripe */