Card Element Quickstart ／ カード要素のクイックスタート

docs

Payments > Collecting payment details > Stripe.js and Elementst > Quickstart
・Card Element Quickstart
・カード要素のクイックスタート
・事前に構築されたUIコンポーネントであるElementsを使用して、カードの機密情報を安全に収集する

「Stripeによる支払処理」は、(処理単位として)2つに分別可能

1.「顧客が入力した支払方法の詳細」を安全に収集する
2.「収集した支払方法」を charge request で使用

・あなたは「機密のカードデータ」を扱う必要なしに安全に、「あなたの顧客のカード情報を集める支払いフォーム」を作成するため、事前構築されたUIコンポーネントであるStripe Elementsを利用することができる
・「カード詳細」はその後、代表的なトークンに変換される
・このトークンは、あなた(販売者側)のサーバーへ、安全に送信できる

4つのステップ

Elementsを使用してカスタム支払いフォームを作成するには、4つのステップが必要
・1.ストライプ要素を設定する
・2.支払いフォームを作成する
・3.カード情報を安全に送信するためのトークンを作成する
・4.トークンと残りのフォームをサーバーに送信する

1.ストライプ要素を設定する

ElementsはStripe.jsの一部として利用できる
・ 始めるには、このスクリプトをあなたのページに含めてくれ - それは常にhttps://js.stripe.comから直接ロードされるべきである

Stripeの高度な詐欺防止機能を最大限に活用するには？
・チェックアウトページだけでなく、サイトのすべてのページにこのスクリプトを含める
・すべてのページにスクリプトを含めることで、Stripeは、ユーザーがWebサイトを閲覧したときに「詐欺を示す可能性がある異常な動作」を検出できる

次に、Elementsのインスタンスを作成する

const stripe = Stripe('pk_test_〇〇');

const elements = stripe.elements();

2.支払いフォームを作成する

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

これらのコンポーネントを挿入する場所を決定するには
・支払いフォーム内に一意のIDを持つ空のDOM要素（コンテナ）を作成する
・コンテナを<label>内または<label>横に、Elementコンテナの一意のidと一致するfor属性を付けて配置することをお勧めする
・そうすることによって、顧客が対応するラベルをクリックしたときに要素が自動的にフォーカスを得る

例：

<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>

・上記のフォームがロードされたら、Elementのインスタンスを作成し、それを上記で作成されたElementコンテナにマウントする

// 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型の全リストについては、 Stripe.jsのリファレンスドキュメントを参照してください。

・Elementsは、入力されたとおりにユーザー入力を検証する
・あなたの顧客が間違わないよう、あなたはcard要素のchangeイベントに耳を傾けそしてあらゆるエラーを表示するべきである：

card.addEventListener('change', ({error}) => {

  const displayError = document.getElementById('card-errors');

  if (error) {

    displayError.textContent = error.message;

  } else {

    displayError.textContent = '';

  }

});

3.カード情報を安全に送信するためのトークンを作成する

・Elementsを使用して収集された「支払い詳細」は、その後トークンに変換できる
・フォーム上のsubmitイベントを処理するイベントハンドラを作成する
・ハンドラーはフィールドをトークン化のためにStripeに送信し、フォームの送信を防ぐ（フォームは次のステップでJavaScriptによって送信される）

// 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を呼び出して、それにcard要素を渡す
・この関数は、この例では使用されていない、顧客から収集された追加の支払い情報を含むオプションの2番目のパラメーターも受け入れる
・この関数はresultオブジェクトで解決されるPromiseを返す
・このオブジェクトは以下のいずれかを持つ
result.token ： トークンは正常に作成された
result.error ：エラーがあった。 これにはクライアントサイドの検証エラーが含まれる。 考えられるすべてのエラーについては、 APIリファレンスを参照してくれ

4.トークンと残りのフォームをサーバーに送信する

最後のステップ
・収集した追加情報とともにトークンをサーバーに送信することである

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();

}

Viewport メタタグが必要

すべてのデバイスで優れたユーザーエクスペリエンスを提供するには
・ページのviewport widthをdevice-widthに設定する必要がある
・これはviewportメタタグで行われる
・他にもいくつかのビューポート設定があり、必要に応じて設定できる
・設定のどこかにwidth=device-widthを含めるようにしてくれ

・例えば、次のものはElementsで動作する
・あなたのページにすでにこのタグがあり、それにwidth=device-width含まれていれば、すべて設定済みである