Link を含むカスタムの決済ページを構築する

まず、Stripe アカウントを作成するかサインインします。

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Stripe は PaymentIntent (支払いインテント) オブジェクトを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。

Setup Intents で今後の使用に向けてカード詳細を収集している場合は、動的な決済手段を使用する代わりに決済手段を手動で一覧表示します。動的な決済手段を使用せずに Link を使用するには、導入を更新して link を payment_method_types に渡します。

PaymentIntent を作成する際は、動的な決済手段を使用して、Link を含む最も関連性の高い支払い方法を顧客に動的に提供します。動的な決済手段を使用するには、payment_method_typesパラメーターを含めないでください。オプションで、automatic_payment_methods を有効にすることもできます。

動的な決済手段を使用して Link を Elements システムに追加するには、次のようにします。

1. ダッシュボードの決済手段の設定で、Link を有効にします。
2. 決済手段を手動で一覧化する既存の実装がある場合は、実装から payment_method_types パラメーターを削除します。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Link は顧客のメールアドレスを使用して顧客を認証します。決済フローに応じて、「メールアドレスを Payment Element に渡す」、「Payment Element 内で直接メールアドレスを収集する」、または「Link Authentication Element を使用する」というオプションがあります。これらのうち、可能であれば顧客のメールアドレスを Payment Element に渡す方法をおすすめします。

メールアドレスを渡す

メールアドレスを収集する

Link Authentication Element を使用する

以下の「いずれか」に該当する場合:

• メールアドレスの収集と Link の認証が最適化された 1 つのコンポーネントを使用する場合。
• 顧客から配送先住所を収集する必要がある場合。

その場合、Link Authentication Element、Payment Element、必要に応じて Address Element を実装する導入フローを使用します。

Link 対応の決済ページでは、最初に Link Authentication Element があり、その次に Address Element が続き、最後に Payment Element となります。決済フローが複数ページにわたる場合、Link Authentication Element を各ページに同じ順序で表示することもできます。

複数の Elements を使用して決済フォームを作成する

このシステムは以下のように動作します。

これで、Elements の構築済みの UI コンポーネントを使用してカスタムの決済フォームを設定できるようになりました。構築したシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。テストの際には、HTTPS を使用しなくても問題ありません。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効にします。

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

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

stripe.confirmPayment を使用し、さまざまな Elements フォームで顧客から収集された情報を使用して支払いを完了します。この関数に return_url を指定して、支払いが完了した後に Stripe がユーザーをリダイレクトする場所を指示します。

ユーザーは、まず銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 Stripe によって return_url にリダイレクトされる場合があります。

By default, card and bank payments immediately redirect to the return_url when a payment is successful. If you don’t want to redirect to the return_url, you can use if_required to change the behavior.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

return_url は、戻りページのレンダリング時に PaymentIntent の支払いのステータスを表示する Web サイト上のページに対応します。Stripe が顧客を return_url にリダイレクトするときに、以下の URL クエリパラメーターを使用して支払いのステータスを確認できます。return_url を指定する際は、独自のクエリパラメーターを追加することもできます。このクエリパラメーターはリダイレクトプロセス全体で存続します。

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。Webhook を使用してこれらのイベントを受信し、顧客への注文確認メールの送信、データベースへの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、こうしたイベントをリッスンするように組み込みを設定します。クライアントからのコールバックを待っているときに、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、さまざまなタイプの支払い方法を 1 つの組み込みで受け付けることができます。

Payment Element を使用して支払いを回収する場合は、payment_intent.succeeded イベント以外に重要な 2 つのイベントも処理することができます。

Link は現在、クレジットカード、デビットカード、および資格要件を満たしたアメリカの銀行口座からの購入にのみ対応しています。Link では、ドメインの登録が必要です。

有効な任意のメールアドレスを使用して、Link のテスト環境のアカウントを作成できます。以下の表には、テスト環境のアカウントの認証に使用できる、固定値のワンタイムパスコードが示されています。

特定の決済手段をテストするには、Payment Element のテスト例をご覧ください。

複数の資金供給元

対応する資金供給元を Stripe が追加した場合でも、貴社で構築済みのシステムを更新する必要はありません。Stripe が自動的に対応し、カード決済や銀行口座決済の場合と同じ売上処理時間と保証が適用されます。

カード認証と 3D セキュア

Link は、カード支払いで 3D Secure 2 (3DS2) 認証をサポートしています。3DS2 では、顧客が支払い時にカード発行会社で追加の認証ステップを完了するように要求されます。3DS を使用して認証が成功した支払いは、ライアビリティシフトの対象になります。

テスト環境で Link を使用して 3DS2 認証のチャレンジフローを起動するには、任意のセキュリティコード、郵便番号、および将来日付の有効期限を指定してテストカード 4000000000003220

を使用します。

テスト環境では、認証プロセスで認証の模擬ページが表示されます。そのページでは支払い のオーソリまたはキャンセルを行うことができます。支払い をオーソリすると、認証の成功がシミュレーションされ、指定された戻り URL にリダイレクトされます。失敗ボタンをクリックすると、認証の失敗がシミュレーションされます。

詳細については、3D セキュア認証ページをご覧ください。