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

Question

我想使用Stripe作为支付提供商创建付款表单.

在Stripe.js参考中,使用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:还看到危险的SetInnerHTML解决方案,我不认为这是一个好习惯.

Answer 1

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