Stripe Elements と Charges API を使用して決済を受け付けるCharges API

アメリカ合衆国およびカナダの顧客からのオンライン決済を受け付けます。

レガシーの API

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

Charges API は、以下の機能をサポートしていません。これらの多くはクレジットカードのコンプライアンスのために必要となります。

Stripe の事前構築された UI コンポーネントである Stripe Elements を使用して支払いフォームを作成すると、機密データを処理することなく、顧客のカード詳細を安全に収集することができます。カード詳細は、それを示す Token に変換され、安全にサーバーに送信することができます。お客様のサーバーはそのトークンを使用して支払いを作成できます。

Stripe の設定

まず、Stripe アカウントが必要です。今すぐ登録してください。

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

独自の支払いフォームの作成
クライアント側

顧客からカード詳細を安全に収集するために、Stripe Elements は Stripe がホストする UI コンポーネントを作成します。UI コンポーネントはお客様が直接作成するのでなく、支払いフォームに配置されます。

Stripe Elements の設定

ウェブページで Elements を使用するには、HTML ページの head にこのスクリプトタグを追加します。

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

このスクリプトは常に、https://js.stripe.com から直接読み込む必要があります。

次の JavaScript を使用して、支払いページに Elements のインスタンスを作成します。

client.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Elements が読み込まれたら、Elements で入力フィールドを追加する支払いフォーム内の場所に、一意の ID で空の DOM コンテナを作成します。Element コンテナの一意の id と一致する for 属性を持つ、<label> 内または <label> の横にコンテナを配置することをお勧めします。これにより、顧客が対応するラベルをクリックすると、自動的に Element にフォーカスが設定されます。

例:

payment.html
<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

上記のフォームが読み込まれたら、card Element のインスタンスを作成し、それを上記で作成した Element コンテナにマウントします。

client.js
// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

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

あるいは、 cardNumber、cardExpiry、cardCvc の Elements を組み合わせて、複数入力の柔軟なカードフォームを作成します。

注

カードの支払い成功率を向上し、不正使用を削減するため、常に郵便番号を収集してください。

単一行の Card Element は、顧客の郵便番号を自動的に収集して Stripe に送信します。分割 Element (Card Number、Expiry、CVC) を使用して支払いフォームを構築する場合、顧客の郵便番号用に別個の入力フィールドを追加します。

サポートされる Elements のタイプの完全な一覧については、Stripe.js リファレンスのドキュメントを参照してください。

トークンの作成
クライアント側

顧客のカード情報送信イベントをリッスンするイベントリスナを追加し、 stripe.createToken(card) を使用してその情報をトークン化します。

client.js
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

createToken は、オプションである 2 番目のパラメーターも受け入れます。これには顧客から収集された追加のカード情報が含まれますが、この例では使用されていません。この関数は Promise を返し、これは result オブジェクトで解決されます。このオブジェクトには次のいずれかが含まれます。

result.token: トークンが正常に作成されたことを示します。
result.error: エラーが発生したことを示します。これにはクライアント側の検証エラーが含まれます。発生し得るエラーのすべてについては API リファレンスをご覧ください。

オブジェクトに result.token が含まれる場合には、それをサーバに送信します。それ以外の場合には、顧客にエラーを表示します。

サーバーへのトークンの送信
クライアント側

収集されたその他の情報とともに、トークンをサーバに送信します。

client.js
const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

トークンでの支払いの作成
サーバ側

クライアントがサーバにトークンを送信したら、それを使用して請求を作成できます。お客様のサーバで、フォームで提出された POST パラメータの Stripe トークンを取得します。ここからは、一度の API コールでカードに請求できます。

支払いの作成の応答は、Charge (支払い) またはエラーコードを含む Error (エラー) のいずれかになります。応答が成功の場合は、顧客の注文のフルフィルメントを行い、成功ページを表示します。それ以外の場合は、エラーページを表示します。

組み込みのテスト

HTML フォームにテストカードを入力したら、それをサーバに送信し、サーバが請求を作成したかどうか確認します。これで組み込みは終了です。

Charges API での基本的な決済の実装が完了しました。この API は、アメリカとカナダ以外の企業や顧客の規模拡大には対応していません。より堅牢でグローバルな決済については、Payment Intents API を使用した決済の受け付けをご確認ください。

参照情報

Elements の詳細および Charges API によるカードの保存方法の詳細をご覧ください。

注