コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
売上
プラットフォームおよびマーケットプレイス
資金管理
開発者向けリソース
概要
バージョン管理
変更ログ
API バージョンのアップグレード
SDK バージョンをアップグレードする
Essentials
SDK
    概要
    サーバー側 SDK
    モバイルの SDK
    iOS SDK
    Android SDK
    React Native SDK
    ウェブの SDK
    ES Module Stripe.js
    React Stripe.js
    Terminal SDK
    iOS SDK
    Android SDK
    React Native SDK
    コミュニティー
    コミュニティ SDK
    モバイル移行
    iOS SDK 24 に移行
    Android SDK 21 に移行
API
テスト
Stripe CLI
サンプルプロジェクト
ツール
ワークベンチ
開発者ダッシュボード
Stripe Shell
Visual Studio Code をご利用の場合
機能
ワークフロー
イベントの送信先
Stripe 健全性アラートファイルのアップロード
AI ソリューション
エージェントツールキット
モデルコンテキストプロトコル
セキュリティとプライバシー
セキュリティ
Stripebot web crawler
プライバシー
Stripe を拡張する
Stripe Appsを構築する
Stripe アプリを使用する
パートナー
Partner Ecosystem
パートナー認定
ホーム開発者向けリソースSDKs

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

React Stripe.js リファレンス

Stripe.js および Stripe Elements の React コンポーネントについてご紹介します。

コードを見る

React Stripe.js がどのように機能するかを確認したり、開発に参加したりする場合は、GitHub でプロジェクトをご確認ください。

React Stripe.js は、Stripe Elements を囲むシンラッパーです。これにより、あらゆる React アプリに Elements を追加できるようになります。

Stripe.js リファレンスには、Elements のカスタマイズの詳細がすべて記載されています。

Elements を任意の Stripe 製品とともに使用することで、オンライン支払いを回収できます。お客様のビジネスに適した導入パスについては、ドキュメントをご覧ください。

注

このリファレンスでは、React Stripe.js API のすべてについて説明しています。実践しながら学ぶことを希望される場合は、支払いの受け付けに関するドキュメント、またはサンプル実装をご覧ください。

はじめに

このガイドは、React の基本的な実践知識を持っていること、そして React プロジェクトがすでに設定されていることを前提としています。React を初めて使用する場合は、続行する前に React のスタートガイドをお読みになることをお勧めします。

設定

npm パブリックレジストリから React Stripe.js と Stripe.js ローダーをインストールします。

Command Line
npm install --save @stripe/react-stripe-js @stripe/stripe-js

Elements プロバイダ

Elements プロバイダーにより、Element コンポーネントの使用が可能になり、ネストされたあらゆるコンポーネント内の Stripe オブジェクトにアクセスできるようになります。React アプリのルートに Elements プロバイダーをレンダリングし、必要な場所でいつでも使用できるようにします。

Elements プロバイダを使用するには、公開可能なキーを使用し、@stripe/stripe-js から loadStripe を呼び出します。loadStripe 関数は、Stripe.js スクリプトを非同期で読み込み、Stripe オブジェクトを初期化します。返された Promise を Elements に渡します。

index.jsx
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(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); 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> ); };
プロパティ説明

stripe

required Stripe | null | Promise<Stripe | null>

Stripe オブジェクトまたは Stripe オブジェクトに解決する Promise。Stripe オブジェクトを初期化する最も簡単な方法は、Stripe.js ラッパーモジュールを使用することです。このプロパティの設定後は、変更することはできません。

サーバ側の初回のレンダリングを実行している場合や、静的なサイトを生成している場合には、null または null に解決する Promise を渡すこともできます。

options

optional Object

オプションの Elements 構成オプション。使用可能なオプションをご覧ください。Payment Elements を作成するには、Intent の作成前にエレメントをレンダリングする場合を除き、Intent の clientSecret を含める必要があります。

プロパティーは変更不可能であるため、options を設定した後は変更できません。ただし、elements.update メソッドを呼び出すことにより、エレメントのデザインを変更できます。

Element コンポーネント

Element コンポーネントは、React アプリで安全に支払い情報を収集するための柔軟な方法を提供します。

個々の Element コンポーネントを Elements ツリー内にマウントできます。1 つの <Elements> グループには、Element のタイプごとに 1 つだけコンポーネントをマウントできます。

CheckoutForm.jsx
import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return ( <form> <PaymentElement /> <button>Submit</button> </form> ); }; export default CheckoutForm;
プロパティ説明

id

optional string

Element のコンテナーに渡されます。

className

optional string

Element のコンテナーに渡されます。

options

optional Object

Element 構成オプションを含むオブジェクト。Payment Element で使用可能なオプション、または各支払い方法の Element で使用可能なオプションをご覧ください。

onBlur

optional () => void

Element がフォーカスを失うとトリガーされます。

onChange

optional (event: Object) => void

この Element によって公開されたデータに変更があるとトリガーされます (エラーがある場合など)。

詳細については、Stripe.js リファレンスをご覧ください。

onClick

optional (event: Object) => void

<PaymentRequestButtonElement> をクリックするとトリガーされます。

詳細については、Stripe.js リファレンスをご覧ください。

onEscape

optional (event: Object) => void

Element 内でエスケープキーが押されるとトリガーされます。

詳細については、Stripe.js リファレンスをご覧ください。

onFocus

optional () => void

Element がフォーカスを受けるとトリガーされます。

onLoaderror

optional (event: Object) => void

Element の読み込みが失敗したときにトリガーされます。

これらのイベントは、payment、linkAuthentication、address、expressCheckout の各要素からのみ受信します。

詳細については、Stripe.js リファレンスをご覧ください。

onLoaderStart

optional (event: Object) => void

ローダー UI が DOM にマウントされ、表示できるようになると、トリガーされます。

これらのイベントは、payment、linkAuthentication、address の各要素からのみ受信します。

詳細については、Stripe.js リファレンスをご覧ください。

onReady

optional (element: Element) => void

Element が完全にレンダリングされ、必須の element.focus() 呼び出しを受け付けられるようになるとトリガーされます。基盤となる Element インスタンスへの参照を使用して呼び出されます。

使用可能な Element コンポーネント

支払い情報を収集するために便利な、さまざまな種類の Elements があります。以下は現時点で使用できる Elements です。

コンポーネント用途
AddressElement236 種以上の地域別フォームで住所詳細を収集します。住所 Element のドキュメントをご覧ください。
AfterpayClearpayMessageElementAfterpay 支払いの分割払いのメッセージを表示します。
AuBankAccountElementBECS ダイレクトデビット支払いに使用する、オーストラリアの銀行口座情報 (BSB と口座番号) を収集します。
CardCvcElementカードのセキュリティコードを収集します。
CardElement必要なすべてのカード詳細を収集する柔軟な一行の入力。
CardExpiryElementカードの有効期限を収集します。
CardNumberElementカード番号を収集します。
ExpressCheckoutElementApple Pay、Google Pay、Link、PayPal など、1 つまたは複数の支払いボタンでカードまたはウォレットによる決済を受け付けることができます。Express Checkout Element のドキュメントをご覧ください。
FpxBankElementFPX 支払いに使用する顧客の銀行。
IbanElement国際銀行口座番号 (IBAN)。SEPA の国々に使用できます。
IdealBankElementiDEAL 支払いに使用する顧客の銀行。
LinkAuthenticationElementメールアドレスを収集し、Link へのログインをユーザーに許可します。Link Authentication Element のドキュメントをご覧ください。
PaymentElement世界中の 25 種類以上の支払い方法から、支払いの詳細を収集します。Payment Element のドキュメントをご覧ください。
PaymentRequestButtonElementApple 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 を返します。

CheckoutForm.jsx
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 を返します。

CheckoutForm.jsx
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 を使用します。

CheckoutForm.jsx
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> ) }
プロパティ説明

children

required ({elements, stripe}) => ReactNode

このコンポーネントは、関数を子として受け取ります。提供する関数は、Element コンポーネントを管理している Elements オブジェクトと <Elements> に渡した Stripe オブジェクト を指定することで呼び出されます。

Promise を Elements プロバイダーに渡しても、Promise が解決されない場合、stripe と elements は null になります。

カスタマイズとスタイリング

iframes を使用する理由

iframe の使用により、Element のスタイリングの難易度は高くなりますが、支払いデータを安全に処理する負担を Stripe に任せられるだけでなく、お客様のサイトの業界規制への準拠も維持することができます。

各エレメントは、iframe にマウントされます。このため Elements は、お客様の既存のスタイルやコンポーネントのフレームワークとは連携しなくなります。ただし、サイトのデザインに合うように Elements を設定することはできます。Elements をカスタマイズするには、イベントへの応答と、appearance オプションを使用した Elements の設定を行います。各 Element のレイアウトは変更できませんが、カラー、フォント、境界線、パディングなどを変更できます。

顧客の場所
サイズ
テーマ
レイアウト
Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。

次のステップ

React Stripe.js および Elements を使用して組み込みを構築します。

  • 支払いを受け付ける
  • Express Checkout Element で決済を受け付ける
  • 支払いリクエストボタンを追加する
  • Elements Appearance API についてもっと知る
  • Stripe.js リファレンス
このページはお役に立ちましたか。
はいいいえ
  • お困りのことがございましたら 、サポートにお問い合わせください。
  • 早期アクセスプログラムにご参加ください。
  • 変更ログをご覧ください。
  • ご不明な点がございましたら、お問い合わせください。
  • LLM ですか?llms.txt を読んでください。
  • Powered by Markdoc