Stripe ✖️ React での決済機能実装について

Stripe React で、使用可能な Element コンポーネントまとめ🌟

https://docs.stripe.com/sdks/stripejs-react#available-element-components

実際に実装したサービスの処理フロー by Code Rabbit 作図

• FE：Next.js
  • 支払い情報を作成して、Hono API に送信する
• BE：Hono
  • 支払い情報を受け取り、Stripe API を使って決済する
  • Stripe.PaymentIntentsResource.create() を使用したクレカ決済 (単発)
• Payment Plattform：Stripe

Stripe ✖️ React での決済機能実装について整理する🌟

Stripe Reactで使用可能なElementコンポーネントについて整理しました。

Stripe ✖️ React の Docがわかりやすい🙏
https://docs.stripe.com/sdks/stripejs-react#available-element-components

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

1. CardElement
   カード番号、有効期限、CVCコードなどの全てのカード情報を一つのUIで入力できるコンポーネント。

2. CardNumberElement
   カード番号のみを入力するコンポーネント。

3. CardExpiryElement
   カードの有効期限のみを入力するコンポーネント。

4. CardCvcElement
   カードのCVCコードのみを入力するコンポーネント。

5. PaymentRequestButtonElement
   Apple PayやGoogle Payなどの即時支払いオプションを提供するボタン。

6. IbanElement
   ヨーロッパのIBAN形式の銀行口座番号を入力するためのコンポーネント。

7. IdealBankElement
   オランダの銀行決済サービス「iDEAL」の銀行選択用コンポーネント。

8. AuBankAccountElement
   オーストラリアの銀行口座情報を入力するためのコンポーネント。

9. FpxBankElement
   マレーシアの銀行決済サービス「FPX」の銀行選択用コンポーネント。

10. AfterpayClearpayMessageElement
    AfterpayやClearpayのプロモーションメッセージを表示するためのコンポーネント。

11. AffirmMessageElement
    Affirmのプロモーションメッセージを表示するためのコンポーネント。

12. PaymentElement
    複数の支払い方法を一つのUIに統合した最新の支払いコンポーネント。

13. LinkAuthenticationElement
    Stripeの「Link」機能に関連したユーザー認証情報を入力するコンポーネント。

14. AddressElement
    ユーザーの住所情報を入力するための汎用コンポーネント。

15. ShippingAddressElement
    配送先の住所情報を入力するためのコンポーネント。

比較表

類似する用語・コンポーネントの比較

CardElementと個別のカード情報コンポーネント

• CardElementはカード番号、有効期限、CVCコードなどを一つのUIで入力します。一方、CardNumberElement、CardExpiryElement、CardCvcElementはそれぞれの情報を個別に入力します。
• メリットの比較:
  • CardElement: 実装が簡単で、フォームがシンプルになる。
  • 個別コンポーネント: レイアウトやスタイルを細かくカスタマイズできる。

AddressElementとShippingAddressElement

• AddressElementは請求先住所や一般的な住所情報の入力に使用されます。
• ShippingAddressElementは配送先住所の入力に特化しており、配送オプションや送料計算と連携しやすい設計になっています。

PaymentElementとCardElement

• PaymentElementはカード情報だけでなく、複数の支払い方法（Wallet、銀行決済、分割払いなど）を一つのUIに統合しています。
• CardElementはカード支払いに特化しています。
• メリットの比較:
  • PaymentElement: 多様な支払いオプションを提供し、ユーザー体験を向上。
  • CardElement: 実装が軽量で、カード支払いのみを簡潔に提供。

まとめ

Stripe Reactでは、多様なニーズに対応するために多数のElementコンポーネントが提供されています。支払い方法や地域、カスタマイズの必要性に応じて適切なコンポーネントを選択することで、最適なユーザー体験を提供できます。

参考・引用

https://docs.stripe.com/sdks/stripejs-react

https://docs.stripe.com/sdks/stripejs-react#available-element-components

Stripe ✖️ React での決済機能実装の事例

https://techblog.matisse.jp/blog/rhb5wym6m14#hc4f63f69b3

Stripe Docの参考になるページ・まとめ

支払い受付フォームのカスタムフロー

https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements

Stripe Web Elements カタログ

https://docs.stripe.com/payments/elements

カスタムの支払いフロー・Quick Start

https://docs.stripe.com/payments/quickstart

Stripe API の概要

https://docs.stripe.com/payments-api/tour

住所入力のStripe Component

https://docs.stripe.com/elements/address-element/collect-addresses?platform=web&client=react

useStripe, useElements について整理

useStripe と useElements は、主にカード決済やその他の支払いフォームを作成するために使用されるフックで、それぞれ Stripe API のインスタンスや要素を管理する役割を持っています。

useStripe

useStripe フックは、Stripe.js のインスタンスにアクセスするために使用されます。
これにより、Stripe API の各種機能やメソッドを呼び出せるようになります。

特徴:

• Stripe オブジェクトへの参照を取得でき、決済やトークン化などの操作が可能。
• Elements コンポーネントの内側でのみ利用可能。アプリケーションのルートや適切な親コンポーネントで <Elements stripe={stripePromise}> のラップが必要。
• 非同期で Stripe インスタンスを取得するため、null の可能性があり、初期化されるまでに条件分岐が必要になることがある。

使い方:

1. useStripe を呼び出して、stripe オブジェクトを取得。
2. stripe.confirmCardPayment や stripe.createToken などのメソッドを利用して、決済の確認やトークンの生成を行う。

import { useStripe } from '@stripe/react-stripe-js';

function PaymentForm() {
  const stripe = useStripe();

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!stripe) return; // Stripe がまだ読み込まれていない場合のガード

    const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
      },
    });
    // エラーハンドリングなど
  };

  return <form onSubmit={handleSubmit}>{/* フォーム内容 */}</form>;
}

useElements

useElements フックは、Stripe の Elements インスタンスにアクセスするために使います。
Elements は、カード番号、CVC、などの各フィールドを管理し、セキュアに支払い情報を入力するための要素です。

特徴:

• <Elements> コンポーネントの内部で呼び出し、Stripe の各要素（例: CardElement, CardNumberElement）を取得しやすくする。
• 各要素は PCI 準拠のため、直接カード情報をアプリケーションで保持せず、安全なフォーム構築が可能。
• elements.getElement() メソッドを使って、CardElement などの各要素への参照を取得し、トークン化や決済処理で利用する。

使い方:

1. useElements を呼び出して、elements インスタンスを取得。
2. elements.getElement(CardElement) で CardElement 要素の参照を取得し、useStripe で取得した stripe オブジェクトと一緒に決済処理を行う。

import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';

function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!stripe || !elements) return;

    const cardElement = elements.getElement(CardElement);

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    });

    if (error) {
      console.log('[error]', error);
    } else {
      console.log('[PaymentMethod]', paymentMethod);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit" disabled={!stripe}>
        支払う
      </button>
    </form>
  );
}

まとめ

• useStripe は Stripe オブジェクトの参照を取得し、決済やトークン生成の操作を行う。
• useElements は Elements インスタンスへの参照を取得し、カード情報のセキュアな要素を管理する。
• 両者はセットで使うことが多く、stripe と elements を使って支払いフォームや処理を安全に管理する。

<Elements> で全体をラップしてから、それぞれの要素や決済処理を行う設計が基本です。
このセットアップにより、Stripe でのカード情報入力や決済をセキュアに、シンプルに実装できます。