目次一覧
状態:-
閲覧数:881
投稿日:2019-02-17
更新日:2019-03-21
Card Payments Quickstart ／ カード支払いのクイックスタート
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種類
┏checkout.js
┃┣Simple
┃┗Custom
┃
┣Stripe.js and Elements
┃
┗Mobile SDKs
┃┣Simple
┃┗Custom
┃
┣Stripe.js and Elements
┃
┗Mobile SDKs
ステップ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>
・オプションだが、詐欺を減らすのに役立つので、 住所と郵便番号の検証を使用することが強く推奨されている
data-zip-code="true"
・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でカードの詳細を保存することもできる
・この方法を使用すると、返品する顧客は、カードの詳細を再入力することなく迅速に支払いを行うことができる