Elements と 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'

将来の支払いに備えて支払い方法を設定するには、その手段を Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。Customer オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。

curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:"

SetupIntent (支払い方法設定インテント) は、セッション中に将来の決済に備えて顧客の支払い方法を設定するという意図を示すオブジェクトであり、セッションのステータスを追跡します。SetupIntent は、link と、サポートするその他の支払い方法を指定して、サーバーで作成します。

curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]"=card \
  -d "payment_method_types[]"=link

その他の支払い方法の設定方法については、将来の支払いを設定するガイドをご覧ください。

client secret を取得する

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

get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {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.confirmSetup を使用して設定を完了します。ユーザーが設定を完了した後に Stripe がユーザーをリダイレクトできるように、この関数に return_url を指定します。支払いが成功すると、Stripe は直ちに Link とカード支払いを return_url にリダイレクトします。

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.confirmSetup({
      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>
  );
}

顧客に請求する準備ができたら、Customer ID と PaymentMethod ID を使用して、PaymentIntent を作成します。請求する支払い方法を見つけるには、顧客に関連付けられた支払い方法をリストアップします。

curl https://api.stripe.com/v1/payment_methods \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "type"="link" \
  -G

Customer ID と PaymentMethod ID を取得したら、決済の金額と通貨を指定し、次のパラメーターを使用して PaymentIntent を作成します。

• PaymentIntent の confirm プロパティの値を true に設定します。これにより、PaymentIntent が作成されると直ちに確定されます。
• payment_method を PaymentMethod の ID に設定します
• Customer を Customer の ID に設定します。
• off_session を true に設定します。これにより、認証が必要な場合に顧客がサイトやアプリでアクティブでないときは、PaymentIntent からエラーが送信されます。

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

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

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

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

複数の資金供給元

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

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

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

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

を使用します。

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

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