如何在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腳本

回答

相關問題