銀行の認証なしでカードを保存する

このガイドを参照する前に、Stripe アカウントが必要です。今すぐ登録してください。

顧客のカード詳細を収集するための決済ページを構築します。カスタムの決済フォームの構築に利用可能な UI ライブラリである Stripe Elements を使用します。Elements を使用した作業を開始するには、次のスクリプトを使用して、決済ページに Stripe.js ライブラリを組み込みます。

<script src="https://js.stripe.com/v3/"></script>

常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

Stripe の高度な不正対策機能を最大限に活用するには、このスクリプトを決済ページだけでなく、自社サイトのすべてのページに追加してください。すべてのページにスクリプトを追加することで、ウェブサイトを閲覧するユーザーの不正行為を示唆するような不審な動作を Stripe が検知できるようになります。

Elements をページに追加する

顧客からカード詳細を安全に収集するために、Stripe がオンラインで提供する UI コンポーネントは、お客様が直接作成するのではなく、Elements によって作成され、その後決済フォームに配置されます。これらのコンポーネントの挿入先を決定するには、決済フォームで一意の ID を持つ空の DOM 要素 (コンテナー) を作成してください。

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

次に、Stripe オブジェクトのインスタンスを作成し、公開可能な API キーを最初のパラメーターとして指定します。その後、Elements オブジェクトのインスタンスを作成し、それを使用して DOM に card Element をマウントします。

card Element は、カードに関する必要な詳細情報をすべて安全に収集する 1 つの柔軟な入力フィールドを挿入することによって、支払いフォームを簡素化し、必要なフィールドの数を最小限に抑えます。

また、cardNumber、cardExpiry、cardCvc の Element を組み合わせることで、柔軟で複数の入力が可能なカードフォームを実現できます。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。実装を機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。

HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効化します。

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

結果として得られた PaymentMethod ID をサーバーに送信します。

アプリケーションから 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'

PaymentMethod を Customer (顧客) に関連付けることでカードを保存します。Customer オブジェクトを使用して、顧客に関する他の情報 (配送の詳細、メールアドレスなど) を格納できます。

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

既存の Customer がある場合は、代わりにそのオブジェクトに PaymentMethod を関連付けることがきます。

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

この時点で、独自の内部的な顧客の表記がある場合は、この表記に顧客 ID と PaymentMethod ID を関連付けます。

準備ができたら、請求する PaymentMethod ID と顧客 ID を取り込みます。これは、両方の ID をお客様のデータベースに格納するか、顧客 ID を使用して顧客の使用可能なすべての PaymentMethod を検索することで実行できます。

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

PaymentMethod ID と顧客 ID を使用して新しい PaymentIntent を作成します。error_on_requires_action を true に設定して、2 段階認証などの顧客のアクションを必要とする支払いを拒否します。

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、エラーが返されます。アプリケーションに戻って支払いを完了するように (メールを送信するなどして) 顧客に通知する必要があります。Stripe API ライブラリから発生したエラーのコードを確認するか、PaymentIntent の last_payment_error.decline_code を確認し、カード発行会社が支払いを拒否した理由を調べます。

支払いが失敗したことを顧客に通知し、ステップ 1 でお客様が作成した決済フォームに顧客を転送します。顧客はそこで新しいカード詳細を入力できます。その新しい PaymentMethod ID をお客様のサーバーに送信して、Customer オブジェクトに関連付けし、再度支払いを行います。

別の方法として、既に作成済みの Customer がある場合は、PaymentIntent の作成とカードの保存を、すべて 1 回の API コールで実行できます。

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

setup_future_usage を on_session に設定すると、不要な認証をトリガーせずに今後のためにカードを保存することを Stripe に対して示します。

Stripe はテスト環境で使用してさまざまなカードの機能をシミュレーションできるテストカードを提供しています。任意のセキュリティコード、郵便番号、将来の有効期限を指定してこれらのカードを使用します。