埋め込みコンポーネントを使用した決済ページの構築公開プレビュー

Elements と Checkout Sessions API を使用して、決済ページを構築します。

Stripe Elements と、税金、割引、配送料などを管理する実装である Checkout Sessions API を使用して、貴社のウェブサイトに決済ページを構築します。

サーバを設定する
サーバー側

はじめに、Stripe アカウントを登録する必要があります。

アプリケーションから API にアクセスするには、公式の Stripe ライブラリを使用します。

custom_checkout_beta=v1 ベータ版ヘッダーを使用するように SDK を設定します。

Checkout セッションを作成する
サーバー側

Checkout セッションを作成してその Client Secret をフロントエンドに返すエンドポイントを、サーバーに追加します。Checkout セッションは、顧客が 1 回限りの購入またはサブスクリプションの支払いを行う際のセッションを表します。Checkout セッションは作成後 24 時間で期限切れとなります。

フロントエンドを設定する
クライアント側

npm パブリックレジストリから React Stripe.js と Stripe.js ローダーをインストールします。React Stripe.js にはバージョン 3.0.0 以上、Stripe.js ローダーにはバージョン 5.2.0 以上が必要です。

Command Line
npm install --save @stripe/react-stripe-js@^3.0.0 @stripe/stripe-js@^5.2.0

フロントエンドの stripe インスタンスを公開可能キーで初期化し、custom_checkout_beta_5 ベータを渡します。

App.jsx
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("pk_test_TYooMQauvdEDq54NiTphI7jx"
, {
  betas: ['custom_checkout_beta_5'],
});

Checkout を初期化する
クライアント側

サーバーから clientSecret を取得し、アプリケーションを CheckoutProvider コンポーネントでラップします。

コンポーネントで useCheckout フックを使用して、Checkout セッションからのデータとそれを更新するメソッドを含む checkout オブジェクトを取得します。ここでは、ラインアイテムをテキストとしてレンダリングし、checkout オブジェクトをコンソールに記録して、使用可能なものを確認します。

App.jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const [clientSecret, setClientSecret] = React.useState(null);
  React.useEffect(() => {
    fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => setClientSecret(json.clientSecret))
  }, []);

  if (clientSecret) {
    return (
      <CheckoutProvider
        stripe={stripe}
        options={{clientSecret}}
      >
        <CheckoutForm />
      </CheckoutProvider>
    );
  } else {
    return null;
  }
};

export default App;

CheckoutForm.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  console.log(checkout);
  return (
    <pre>
      {JSON.stringify(checkout.lineItems, null, 2)}
    </pre>
  )
};

顧客のメールアドレスを収集する
クライアント側

顧客のメールアドレスを収集するコンポーネントを作成します。顧客が入力を完了してメールアドレスを検証し、保存したら、updateEmail を呼び出します。

複数ステップからなるフォームの場合は、保存ボタンをクリックするといった次のステップに進む前に、updateEmail を呼び出します。
単一ページのフォームの場合は、支払いを送信する前に updateEmail を呼び出します。また、updateEmail を呼び出して、入力をぼかす際など、早い段階で検証することもできます。

EmailInput.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const EmailInput = () => {
  const checkout = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  const handleBlur = () => {
    checkout.updateEmail(email).then((result) => {
      if (result.error) {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };
  return (
    <div>
      <input
        type="text"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;

支払い情報を収集する
クライアント側

Payment Element を使用して、クライアントで支払い情報を収集します。Payment Element は、さまざまな決済手段で支払い情報の収集を簡略化する事前構築済みの UI コンポーネントです。

リピートユーザーに対する Link のしくみを見るには、メールアドレス demo@stripe.com を入力してください。新規登録中の Link のしくみを見るには、他の任意のメールアドレスを入力し、フォームの残りの部分に入力してください。

CheckoutProvider 内に PaymentElement コンポーネントをマウントします。

CheckoutForm.jsx
import React from 'react';
import {PaymentElement, useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  return (
    <form>
      <PaymentElement options={{layout: 'accordion'}}/>
    </form>
  )
};

export default CheckoutForm;

次のプロパティがサポートされています。

elementsOptions.appearance を CheckoutProvider に渡すことで、すべての要素のデザインをカスタマイズできます。

支払いを送信する
クライアント側

confirm を呼び出して支払いを送信する「支払う」ボタンをレンダリングします。

PayButton.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const PayButton = () => {
  const {confirm} = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const handleClick = () => {
    setLoading(true);
    confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;

構築したシステムをテストする

決済ページに移動します。
次の表の決済手段を使用して、支払いの詳細を入力します。カード支払いの場合:
- カードの有効期限として任意の将来の日付を入力します。
- 任意の 3 桁のセキュリティコードを入力します。
- 請求先の任意の郵便番号を入力します。
Stripe に支払いを送信します。
ダッシュボードに移動し、支払いページで対象の支払いを探します。支払いが成功すると、そのリストに表示されます。
支払いをクリックすると、請求先情報や購入したアイテムのリストなどの詳細が表示されます。この情報を使用して注文のフルフィルメントを実行できます。

カード番号	シナリオ	テスト方法
	カード支払いは成功し、認証は必要とされません。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	カード支払いには認証が必要です。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	カードは、`insufficient_funds` などの拒否コードで拒否されます。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	UnionPay カードは、13 ～ 19 桁の可変長です。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。

実装内容をテストするためのその他の情報については、テストをご覧ください。

注

埋め込みコンポーネントを使用した決済ページの構築公開プレビュー

Elements と Checkout Sessions API を使用して、決済ページを構築します。

サーバを設定するサーバー側

Checkout セッションを作成するサーバー側

フロントエンドを設定するクライアント側

Checkout を初期化するクライアント側

顧客のメールアドレスを収集するクライアント側

支払い情報を収集するクライアント側

支払いを送信するクライアント側