Stripe Payments ＞ COLLECTING PAYMENT DETAILS ／ 支払い詳細の収集 ＞ Stripe.js and Elements

docs

Payments > Collecting payment details > Stripe.js and Elements
・Stripe.js and Elements
・Stripe.jsと要素
・Web用の最新の安全な支払いフローを構築する

Stripe.jsとは？

JavaScriptライブラリ
・支払いフローを構築するための基本的なJavaScriptライブラリ
・使用すると、ユーザーから機密情報を収集し、そのデータをあなた(販売者側)のサーバーへ安全に送信するための代表的なトークンを作成できる
・カスタマイズ可能なUI要素を使用して機密性の高い支払い情報を収集できる
・ Stripe.jsは、Apple Pay、Google Pay、Payment Request API のための単一のインターフェースも提供する

Stripe.jsを使用すると
・機密情報をトークン化し、 Checkoutと統合し、 3D Secure認証を処理することもできる
・すべての機密情報はStripe.jsによって処理されるため、SAQ Aレポート(自己問診によるPCI DSS準拠支援)に準拠した簡単なPCI準拠を特徴としている
※PCIコンプライアンスとして、SAQ A(自己問診によるPCI DSS準拠支援)方式を採用している

Stripe.jsを使用すると、次のようなさまざまな形式の機密情報を簡単に操作できる
・カード情報
・銀行口座の詳細
・個人を特定できる情報（PII）
・ソースを介した多種多様な支払い方法

注意事項
・独自の支払いフォームを作成したくない場合は、埋め込み形式の最適化された支払いツールCheckoutを検討してくれ
・独自の支払いフォームを作成したくない場合は、「1回限りの購入」と「subscriptions」の支払いを受け取るための「StripeがホストするページであるCheckout」を検討してくれ

Stripe要素

予め構築されたUIコンポーネント
・チェックアウトフローを構築するための構築済みUIコンポーネントセット
・Stripe.jsの機能として利用できる
・Elementsは、ユーザーから情報を収集するための入力やボタンなどの既製のUIコンポーネントを提供する
・Stripe.jsはあなた(販売者側)のサーバーに触れることなくエレメント内の機密情報をトークン化する

Elements には、次のような機能がある
・入力されたとおりにカード情報を自動的にフォーマットする
・プレースホルダを顧客の希望する言語に翻訳する
・顧客の画面またはモバイルデバイスの幅に合わせたレスポンシブデザイン
・チェックアウトフローの外観に合わせてカスタマイズ可能なスタイル

カード要素を使用すると、1つの要素内のすべてのカード情報を収集できる
・動的に更新されるカードのブランドアイコンと、番号、有効期限、CVC、および郵便番号の入力が含まれている

開始するには
・カード要素のクイックスタートを参照してくれ

支払い要求ボタンを使用すると？
・顧客はApple Pay 、 Google Pay 、Chromeカード、およびMicrosoft Payを使ってチェックアウトできる
・Apple Pay対応のブラウザを使用している場合、顧客には左下にボタンが表示される
・Payment Request APIをサポートするブラウザを使用している場合は、右下にボタンが表示される

IBAN要素を使用すると、顧客の銀行口座の詳細を収集できる
・Stripe Q12。IBAN要素を使用すると、日本でも顧客の銀行口座の詳細を取得できますか？

Elements の例

Elements は完全にカスタマイズ可能
・サイトの外観に合わせて要素をスタイル設定して、顧客にシームレスなチェックアウト体験を提供できる
・例えば要素にフォーカスがあるときなど、さまざまな入力状態をスタイルすることもできる

Elementsの使い方の例をいくつか見るには？
・GitHubにあるオープンソースの例とそれに付随するソースコードを調べてくれ

支払いを処理するためにElementsをバックエンドへ組み込む方法を示すend-to-end の例
・このデモアプリケーションをチェックし、GitHubでそのソースコードを参照してくれ
・このサンプルストアは、支払い要求、Apple Pay、Google Pay、およびその他の支払い方法をサポートしているカード支払いを受け入れる
・Card ElementとPayment Request Buttonの両方を実装したサンプルのeコマースストア

Reactで「Stripe.js and Elements」を使う

Reactと一緒にStripe.jsとElementsを使用したい場合
・GitHubで公開されているオープンソースのreact-stripe-elementsプロジェクトを使用してくれ
・このプロジェクトはStripe.jsとElementsの細かいラッパーで、内部の状態とコンポーネントのライフサイクルを管理する

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含まれていれば、すべて設定済みである