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

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

Build a checkout page on your website using Stripe Elements and Checkout Sessions, an integration that manages tax, discounts, shipping rates, and more.

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

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

はじめに、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 以上が必要です。 from the npm public registry. You need at least version 3.0.0 for React Stripe.js and version 5.2.0 for the Stripe.js loader.

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 コンポーネントでラップします。

Use the useCheckout hook in your components to get the checkout object, which contains data from the Checkout Session as well as methods to update it. For now, render the line items as text and log the checkout object to the console to see what’s available.

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.checkoutSessionClientSecret))
  }, []);

  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 コンポーネントです。

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

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;

サポートされているオプションについては、Stripe.js のドキュメントを参照してください。 to view what options are supported.

elementsOptions.appearance を CheckoutProvider に渡すことで、すべての Elements のデザインをカスタマイズできるようになります。.

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

useCheckout から confirm を呼び出して支払いを送信する「支払う」ボタンをレンダリングします。 to submit the payment.

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 に支払いを送信します。
ダッシュボードに移動し、取引ページで支払いを探します。支払いが成功していると、そのリストに表示されます。. If your payment succeeded, you’ll see it in that list.
支払いをクリックすると、請求先情報や購入したアイテムのリストなどの詳細が表示されます。この情報を使用して注文のフルフィルメントを実行できます。

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

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

注

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

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

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

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

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

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

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

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

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