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

주 : 지금까지 난 다음이가 적극적으로 업데이트되지 않습니다 나는이 ReactScriptLoader를 사용하고자하지 않을 것입니다.

주 2 : 좋은 연습이라고 생각하지 않는 해결책도 보았습니다. dangerouslySetInnerHTML.

Answer 1

스트라이프가 공식적으로 발표했다 당신이 Stripe Elements를 추가 할 수 있도록 구성 요소 반응과 react-stripe-elements 모듈을 당신의 반작용 앱.

Answer 2

스트라이프의 경우 NPM module이지만 클라이언트 측 응용 프로그램에서는 사용하지 않습니다. 당신은 당신의 index.html 페이지에 스크립트 태그를 통해 stripe.js 라이브러리를 추가해야합니다 (또는 당신이 마운트 가져옵니다 반응하는 HTML 요소를 생성 할 때마다 스크립트 반응) 것 :

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

이가이다 Stripe documentation에서 권장되는 방법입니다. 전체 범위에 Stripe 개체를 생성합니다. 여기에서 React 코드에 액세스 할 수 있습니다.

개발자가 지원하는 방식이 아닌 다른 방식으로 지불하는 데 라이브러리를 사용하는 것에 매우주의해야합니다.이 목적으로 ReactScriptLoader 및 dangerouslySetInnerHtml을 피하는 것이 옳다고 생각합니다.

당신이 ESLint를 사용하는 경우 경고를 중지하기 위해 JSX 파일의 상단에 지구를 지정할 수 있습니다

/* global Stripe */