React Stripe.js リファレンス
Stripe.js および Stripe Elements の React コンポーネントについてご紹介します。
React Stripe.js は、Stripe Elements を囲むシンラッパーです。これにより、あらゆる React アプリに Elements を追加できるようになります。
Stripe.js リファレンスには、Elements のカスタマイズの詳細がすべて記載されています。
Elements を任意の Stripe プロダクトとともに使用することで、オンライン支払いを回収できます。お客様のビジネスに適した導入パスについては、Stripe のドキュメントをご覧ください。
注
はじめに
このガイドは、React の基本的な実践知識があること、また、React プロジェクトがすでに設定されていることを前提としています。React を初めて使用する場合は、先に進む前に React のクイックスタートガイドをお読みになることをお勧めします。
設定
Elements プロバイダ
Elements
プロバイダーにより、Element コンポーネントの使用が可能になり、ネストされたあらゆるコンポーネント内の Stripe オブジェクトにアクセスできるようになります。React アプリのルートに Elements
プロバイダーをレンダリングし、必要な場所でいつでも使用できるようにします。
Elements
プロバイダを使用するには、公開可能なキーを使用し、@stripe/stripe-js
から loadStripe を呼び出します。loadStripe
関数は、Stripe.js スクリプトを非同期で読み込み、Stripe オブジェクトを初期化します。返された Promise
を Elements
に渡します。
import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe(
); export default function App() { const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', }; return ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); };'pk_test_TYooMQauvdEDq54NiTphI7jx'
プロパティ | 説明 |
---|---|
| required Stripe オブジェクトまたは Stripe オブジェクトに解決する サーバ側の初回のレンダリングを実行している場合や、静的なサイトを生成している場合には、 |
| optional オプションの Elements 構成オプション。使用可能なオプションをご覧ください。Payment Elements を作成するには、Intent の作成前にエレメントをレンダリングする場合を除き、Intent の プロパティーは変更不可能であるため、 |
Element コンポーネント
Element コンポーネントは、React アプリで安全に支払い情報を収集するための柔軟な方法を提供します。
個々の Element コンポーネントを Elements
ツリー内にマウントできます。1 つの <Elements>
グループには、Element のタイプごとに 1 つだけコンポーネントをマウントできます。
import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return ( <form> <PaymentElement /> <button>Submit</button> </form> ); }; export default CheckoutForm;
プロパティ | 説明 |
---|---|
| optional Element のコンテナーに渡されます。 |
| optional Element のコンテナーに渡されます。 |
| optional Element 構成オプションを含むオブジェクト。Payment Element で使用可能なオプション、または各支払い方法の Element で使用可能なオプションをご覧ください。 |
| optional Element がフォーカスを失うとトリガーされます。 |
| optional この Element によって公開されたデータに変更があるとトリガーされます (エラーがある場合など)。 詳細については、Stripe.js リファレンスをご覧ください。 |
| optional
詳細については、Stripe.js リファレンスをご覧ください。 |
| optional Element 内でエスケープキーが押されるとトリガーされます。 詳細については、Stripe.js リファレンスをご覧ください。 |
| optional Element がフォーカスを受けるとトリガーされます。 |
| optional Element の読み込みが失敗したときにトリガーされます。 このイベントは、 詳細については、Stripe.js リファレンスをご覧ください。 |
| optional ローダー UI が DOM にマウントされ、表示できるようになると、トリガーされます。 このイベントは、 詳細については、Stripe.js リファレンスをご覧ください。 |
| optional Element が完全にレンダリングされ、必須の |
使用可能な Element コンポーネント
支払い情報を収集するために便利な、さまざまな種類の Elements があります。以下は現時点で使用できる Elements です。
コンポーネント | 用途 |
---|---|
AddressElement | 236 種以上の地域別フォームで住所詳細を収集します。住所 Element のドキュメントをご覧ください。 |
AfterpayClearpayMessageElement | Afterpay 支払いの分割払いのメッセージを表示します。 |
AuBankAccountElement | BECS ダイレクトデビット支払いに使用する、オーストラリアの銀行口座情報 (BSB と口座番号) を収集します。 |
CardCvcElement | カードのセキュリティコードを収集します。 |
CardElement | 必要なすべてのカード詳細を収集する柔軟な一行の入力。 |
CardExpiryElement | カードの有効期限を収集します。 |
CardNumberElement | カード番号を収集します。 |
ExpressCheckoutElement | Apple Pay、Google Pay、Link、PayPal など、1 つまたは複数の支払いボタンでカードまたはウォレットによる決済を受け付けることができます。Express Checkout Element のドキュメントをご覧ください。 |
FpxBankElement | FPX 支払いに使用する顧客の銀行。 |
IbanElement | 国際銀行口座番号 (IBAN)。SEPA の国々に使用できます。 |
IdealBankElement | iDEAL 支払いに使用する顧客の銀行。 |
LinkAuthenticationElement | メールアドレスを収集し、Link へのログインをユーザーに許可します。Link Authentication Element のドキュメントをご覧ください。 |
PaymentElement | 世界中の 25 種類以上の支払い方法から、支払いの詳細を収集します。Payment Element のドキュメントをご覧ください。 |
PaymentRequestButtonElement | Apple Pay または Payment Request API によって処理されるオールインワンの決済ボタン。詳細については、支払いリクエストボタンのドキュメントをご覧ください。 |
useElements フック
useElements(): Elements | null
Payment Element によって収集された支払い情報を安全に Stripe API に渡すには、Elements
インスタンスにアクセスし、それを stripe.confirmPayment とともに使用できるようにします。React Hooks API を使用する場合は、マウントされた Element へのアクセスに useElements
を使用することをお勧めします。クラスコンポーネントから Element にアクセスする必要がある場合は、代わりに ElementsConsumer を使用します。
注
Promise
を Elements プロバイダーに渡しても、Promise
が解決されない場合、useElements
は null
を返します。
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button disabled={!stripe}>Submit</button> </form> ) }; export default CheckoutForm;
useStripe フック
useStripe(): Stripe | null
useStripe
フックは、Elements プロバイダーに渡された Stripe インスタンスへの参照を返します。クラスコンポーネントから Stripe オブジェクトにアクセスする必要がある場合には、代わりに ElementsConsumer を使用します。
注
Promise
を Elements プロバイダーに渡しても、Promise
が解決されない場合、useStripe
は null
を返します。
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button disabled={!stripe}>Submit</button> </form> ) }; export default CheckoutForm;
ElementsConsumer
Payment Element によって収集された支払い情報を Stripe API に安全に渡すには、Elements
インスタンスにアクセスして、それを stripe.confirmPayment とともに使用できるようにします。クラスコンポーネントから Stripe オブジェクトまたは Element にアクセスする必要がある場合は、useElements フックや useStripe フックの代わりに ElementsConsumer
を使用します。
import {ElementsConsumer, PaymentElement} from '@stripe/react-stripe-js'; class CheckoutForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props; if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; render() { return ( <form onSubmit={this.handleSubmit}> <PaymentElement /> <button disabled={!this.props.stripe}>Submit</button> </form> ); } } export default function InjectedCheckoutForm() { return ( <ElementsConsumer> {({stripe, elements}) => ( <CheckoutForm stripe={stripe} elements={elements} /> )} </ElementsConsumer> ) }
プロパティ | 説明 |
---|---|
| required このコンポーネントは、関数を子として受け取ります。提供する関数は、Element コンポーネントを管理している Elements オブジェクトと <Elements> に渡した Stripe オブジェクト を指定することで呼び出されます。
|
カスタマイズとスタイリング
各エレメントは、iframe
にマウントされます。このため Elements は、お客様の既存のスタイルやコンポーネントのフレームワークとは連携しなくなります。ただし、サイトのデザインに合うように Elements を設定することはできます。Elements をカスタマイズするには、イベントへの応答と、appearance オプションを使用した Elements の設定を行います。各 Element のレイアウトは変更できませんが、カラー、フォント、境界線、パディングなどを変更できます。
次のステップ
React Stripe.js および Elements を使用して組み込みを構築します。