Stripe.js komut dosyası, React bileşenine nasıl eklenir

Question

Ödeme sağlayıcı olarak Stripe kullanarak Ödeme formu oluşturmak istiyorum. Stripe.js Reference içinde, form bileşenini oluşturma prosedürü, sayfadaki harici komut dosyasını içeren jQuery'yi kullanarak açıklanmıştır. React bileşenime nasıl dahil edilebilir? En iyi yol nedir?

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 
} 
} 

Not 1: Bugüne kadar ben aşağıdakilere sahip aktif güncellenen değil gibi ben ReactScriptLoader kullanmak istemez.

Not2: Ayrıca iyi bir uygulama olduğunu düşünmüyorum dangerouslySetInnerHTML çözüm gördüm.

Answer 1

Çizgili resmen yayınladı size Stripe Elements eklemek yardımcı bileşenler tepki ile react-stripe-elements modülü sizin Tepki Uygulamanın.

Answer 2

Şerit için bir NPM module varken, istemci tarafında uygulamalar için kullanmayı desteklemezler. Sen index.html sayfasına komut dosyası etiketi aracılığıyla stripe.js kütüphane eklemek zorunda (Ya da monte ve ithal edecek tepki HTML öğesini oluşturur yerde komut tepki) olacaktır:

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

budur Stripe documentation'dan önerilen yöntem. Genel kapsamda Stripe nesnesini oluşturacak ve React kodunuza erişebileceksiniz.

Ödemeleriniz için geliştiriciden başka bir şekilde herhangi bir şekilde bir kütüphane kullanmaktan çekiniyorum - bu amaçla ReactScriptLoader ve dangerouslySetInnerHtml'dan kaçınmaya hakkınız olduğunu düşünün.

Eğer ESLint kullanırsanız, uyarıyı durdurmak için JSX dosyasının en üstünde küresel belirtebilirsiniz:

/* global Stripe */