Card Payments Quickstart ／ カード支払いのクイックスタート

docs

Payments > Quickstart
・Card Payments Quickstart
・カード支払いのクイックスタート

顧客からカード情報を安全に収集し、カード支払いを作成

Stripeを使った「カード支払い」の受け取り
・「クライアントサイド」と「サーバーサイド」の2つのステップからなる
・1.顧客は、ブラウザで表示しているWebサイト内に設置されているフォームから「自分の支払い情報」を、Stripeサーバへ送信
・2.「顧客の支払い情報」を受け取ったStripeサーバ は、処理を行った後、顧客のブラウザへトークンを返す
・3.顧客は、フォームデータと共に、ブラウザから販売者側のサーバへ送信
・4.販売者側のサーバは、トークンを使用して、「料金を作成し、支払いを完了するための APIリクエスト」を行う

特徴
・トークン化により、機密のカードデータがサーバーにアクセスする必要がなくなるため、PCIにした準拠した方法で運用できる
・StripeのDashboardとAPIでは、カードに関する限定的な情報（下4桁、有効期限、ブランドなど）は提供されているが、カードの詳細は完全には明らかにされない

ステップ1：安全に支払い情報を収集する

3種類

ステップ1：checkout.js

安全にカード情報を集めてトークン化するための最も簡単な方法はCheckoutを使うこと
・HTML、JavaScript、およびCSSを組み合わせて、埋め込み支払いフォームを作成する
・顧客が支払い情報を入力すると、カードの詳細が検証され、サーバーサイドコードで使用できるようにトークン化される

はじめに、次のコードを支払いページに追加する
・フォームが必ず自分のサーバーサイドコードに送信されるようにする
・data-key属性 … 公開可能APIキー。pk_test_〇〇

<form action="your-server-side-code" method="POST">

  <script

    src="https://checkout.stripe.com/checkout.js" class="stripe-button"

    data-key="pk_test_〇〇"

    data-amount="999"

    data-name="q"

    data-description="Example charge"

    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"

    data-locale="auto"

    data-currency="jpy">

  </script>

</form>

・オプションだが、詐欺を減らすのに役立つので、 住所と郵便番号の検証を使用することが強く推奨されている

・Checkoutを設定(必要な属性をフォームに追加)して、ユーザーの請求先住所と配送先住所を収集することもできる

Checkoutフォームコードで表示される金額
・ユーザーに表示される目的でのみ使用される
・顧客に請求する金額は設定されない
・請求を行うときにも金額を指定する必要がある
・「支払いフォーム」と「サーバーサイドコード」が同じ金額を設定するようにする必要がある

Checkoutカスタムアプローチ
・任意のHTML要素またはJavaScriptイベントを使用してCheckoutを開くことや、カスタム金額などの動的な引数を指定することができる

ステップ1：Stripe.js and Elements

フルカスタマイズ
・「支払いフォームのルックアンドフィールを完全に制御したい場合」に使用

ステップ1：Mobile SDKs

ネイティブのモバイルライブラリ
・iOSおよびAndroid用のネイティブのモバイルライブラリを使用して、Stripeはモバイルアプリケーション内から顧客の支払い情報を収集し、サーバーサイドコードが使用するためのトークンを作成できる

ステップ2：支払いを完了するための料金を作成する

トークンが作成されると、サーバーサイドのコードは1回限りの請求を作成するためのAPIリクエストを行う
・このリクエストには、トークン、通貨、請求額、および渡したい追加情報（ メタデータなど ）が含まれている
・このリクエストには、トークンのID（例えば、 tok_■■ ）がsourceパラメータの値として指定する

// 秘密鍵を設定する。実運用では、これをライブの秘密鍵に変更することを忘れないでくれ

// See your keys here: https://dashboard.stripe.com/account/apikeys

\Stripe\Stripe::setApiKey("sk_test_●●");



// トークンはCheckoutまたはElementsを使用して作成される

// 次のフォームで送信された支払いトークンIDを取得する

$token = $_POST['stripeToken'];



$charge = \Stripe\Charge::create([

    'amount' => 999,

    'currency' => 'usd',

    'description' => 'Example charge',

    'source' => $token,

]);

トークン
・一度だけ、そして作成から数分以内に使用することができる

・このアプローチを使用する場合、あなたの顧客は「購入をする度に自身の支払い詳細を再入力」する必要がある

後で使用するために、Stripeでカードの詳細を保存することもできる
・この方法を使用すると、返品する顧客は、カードの詳細を再入力することなく迅速に支払いを行うことができる