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

我想使用Stripe作为支付提供程序创建付款表单。如何在React组件中添加Stripe.js脚本

在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解决方案，我不认为这是很好的做法。

来源

2016-11-04 sstauross

你有没有想过办法做到这一点？ –

条纹正式发布react-stripe-elements模块与之反应，可以帮助您添加Stripe Elements到组件的阵营应用程序。

来源

2017-07-03 13:34:12 sstauross

这真棒 - 仍然看起来像你需要在页面stripe.js标签虽然（根据自述文件）。 –

多数民众赞成在真正@MattHolland。 – sstauross

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

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

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

我会非常谨慎地使用图书馆以任何其他方式支付的开发者 - 认为你是正确的，以避免ReactScriptLoader和dangerouslySetInnerHtml为此目的。

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

/* global Stripe */

来源

2017-06-30 22:16:05

客户端，你可以正式使用这个库从stripe：https：//github.com/stripe/react-stripe-elements – sstauross

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

回答

相关问题