Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Checkout Reference

Stripedocumentation

目次一覧

 状態:-  閲覧数:1,982  投稿日:2019-02-23  更新日:2019-03-21  
Checkout Reference / チェックアウトのリファレンス
Checkout Reference Simple
Checkout Reference Custom

Checkout Reference / チェックアウトのリファレンス

 閲覧数:315 投稿日:2019-02-23 更新日:2019-02-26 

docs


Payments > Collecting payment details > Checkout
Checkout Reference
チェックアウトのリファレンス

Checkout


Stripeサーバへ直接渡す
・「顧客の支払い詳細」を安全に受け入れ、それらを(販売者側のサーバを通さず)Stripeのサーバへ直接渡す

トークンを返す
・Stripeはそれらの「支払い詳細のトークン表現」を、(クライアント側にあるCheckoutへ)返す

トークンは販売者側のサーバへ渡される
・(クライアント側にあるCheckoutへ)返されたトークンは、あなた(販売者側)のサーバへ渡される

トークンの生成と使用


Stripeを使用すると?
・重要なカード会員データがあなた(販売者側)のサーバーに届かず、PCIコンプライアンスの負担が大幅に軽減される
・Stripeは、ログの編集やカードの詳細の暗号化など、PCIコンプライアンスの最も難しい部分を処理する
・チェックアウトページでHTTPSを有効にするだけで、そこから引き継ぐ

全体のワークフロー
・1.顧客が、HTTPS経由でロードされたチェックアウトコードを含む支払いページへアクセス
・2.顧客は支払いボタン(例: Pay with Card )をクリックして支払いフォームに記入し、Checkoutウィンドウ内でPay $ 9.99をクリックする(Checkoutの支払いボタンは何でも良い)
・3.(顧客が入力したカード情報)詳細が基本バリデーションをパスした場合、Checkoutは顧客のブラウザから支払い詳細をStripeへ直接送信する
・4.Stripeは(クライアント側にある)Checkoutへトークンを返すか、カードネットワークの検証に失敗した場合はエラーメッセージを返す
・5.Checkoutは返されたトークンを受け取り、それをページのフォーム(上の<script>タグを囲む形式)で、 stripeTokenという名前のhidden要素で保存
・6.Checkoutは、あなた(販売者側)のサーバへフォームを送信する
・7.あなた(販売者側)のサーバは、ポストされたトークンを使って料金を作成する

注意事項
・ブラウザで実行されているチェックアウトは、支払い情報を安全に受け入れるが、支払い処理を開始しない
・実際の請求リクエストはあなた(販売者側)のサーバーからトリガーされる

Checkoutの組み込み


1行のコード
・Checkoutを1行のクライアントサイドコードで組み込むことが出来る

Stripeの新機能がリリースされると?
・自動的に既存のCheckout組み込みにロールアウト(展開)されるため、変更を加えることなく常に最新のテクノロジを使用できる

郵便番号の収集
・オプションだが、Checkoutでユーザーの郵便番号を収集することも強くお勧めする
・住所および郵便番号の確認が詐欺を減らすのに役立つ
・単にdata-zip-code = "true"を上記に追加して、検証に失敗した支払いを拒否するためにRadarの組み込みルールを利用するだけ
※日本アカウント未対応

注意事項
・チェックアウトはhttps://checkout.stripe.com/checkout.jsから直接ロードする必要がある
・Checkoutのローカルコピーを使用することはサポートされておらず、ユーザーに見えるエラーが発生する可能性がある

2つの異なる組み込み形式
・チェックアウトは2つの異なる組み込み形式をサポートする

Simple
・シンプルな組み込み形式は、青いカード払いボタンとなる
・支払いフォームが完成してトークンを受け取ると、Checkoutはそのトークンを支払いフォームの input hidden 内に保管し、サーバー側で使用するため、そのフォームを自動的に送信する

Custom
・カスタム組み込み形式を使用すると、カスタムボタンを作成してStripe トークンをJavaScriptコールバックへ渡すことができる
・JavaScriptコールバックは、トークンを使用するためにあなたのサーバーへ送信する必要がある

サポートされている言語


英語に加えて、Checkoutは以下の言語をサポート
・日本語(ja)

Checkoutに渡されたカスタム文字列(name, description, panelLabel、 labelなど)
・自動的に翻訳されない

チェックアウトは、ロケールを使用して数字と通貨をフォーマットする
・特定のロケールを指定した場合、Checkoutはそのロケールを数値と通貨のフォーマットに使用する

例えば、通貨をEURに設定し、ロケールをautoに設定してCheckoutをロードすると?
・英語(en)を使用するように設定されたブラウザで€25.00が表示される
・ハンガリー語(hu)で設定されたブラウザでは25,00€が表示される

Checkout Reference Simple

 閲覧数:311 投稿日:2019-02-26 更新日:2019-02-26 

Simple


シンプルな組み込み形式
・支払いフォーム内の<script>タグを使用して青いチェックアウトボタンを表示する
・Checkoutプロセスが完了すると、Checkoutは、 stripeTokenとフォームに含まれるすべての要素を渡すため、フォームをサーバーへ送信する
・次のコードをページへ追加するときは、formのaction属性を、あなた自身のサーバーサイドコードへ変更して送信してくれ
・Stripeアカウントでこのコードをテストするには、実際の公開可能なAPIキーに置き換えてくれ
<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="PHPデモ"
   data-description="Widget"
   data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
   data-locale="auto"
   data-currency="jpy">
 </script>
</form>


受信パラメータ
・Checkoutが完了すると、フォーム内の他の要素とともに、次のパラメータがフォームのアクションエンドポイントに送信される
パラメータ 説明
stripeToken 支払い詳細を表すトークンのID
stripeEmail チェックアウトプロセス中にユーザーが入力した電子メールアドレス
- -
- -

設定必須

キー 説明
data-key 公開キー(テスト用または本番用)

強く推奨されている設定オプション


以下の設定オプションを使用して、Checkoutの外観と動作を変更する
キー 説明
data-image ブランドまたは製品の正方形の画像を指す相対URLまたは絶対URL。推奨される最小サイズは128 x 128 px。サポートされている画像の種類は、 .gif 、 .jpeg 、及び.png
data-name あなたの会社またはウェブサイトの名前
data-description 販売している製品またはサービスの説明
data-amount [チェックアウト]ダイアログでユーザーに表示される金額(JPY)。 APIを使用して請求を作成するときに、金額を明示的に含める必要がある。 (また、デフォルトのUSDを変更するには、Checkoutにdata-currencyの値を指定する必要がある)
data-locale 利用可能な場合、 ユーザーの希望する言語でCheckoutを表示するには、 autoを指定する。 デフォルトでは英語が使用される
data-zip-code Checkoutが請求先の郵便番号を検証するかどうかを指定する(trueまたはfalse)。 デフォルトはfalseだが、アカウント設定におけるバリデーションfalseによる拒否を有効にするためtrueに設定することを強くお勧めする。日本アカウント未対応
data-billing-address Checkoutがユーザーの請求先住所を収集するかどうかを指定する(trueまたはfalse)。 デフォルトはfalse

設定オプション

キー 説明
data-currency 金額の通貨(3文字のISOコード )。 デフォルトはUSD
data-panel-label チェックアウトフォームの支払いボタンのラベル( Subscribe, Pay {{amount}}など)。 ラベル値に{{amount}}を含めると、ローカライズ版のdata-amount置き換えられる。 それ以外の場合は、ローカライズされたdata-amountがラベルの末尾に追加される。 チェックアウトは、カスタムラベルをユーザーの希望する言語に翻訳しない
data-shipping-address Checkoutがユーザーの配送先住所を収集するかどうかを指定する(trueまたはfalse)。 デフォルトはfalse
data-email あなたのユーザーのEメールアドレスを既に知っている場合は、それをCheckoutに提供して事前入力することができる
data-label 青いボタンに表示されるテキスト。 デフォルトは Pay with Card。 チェックアウトは現在このラベルを翻訳していない
data-allow-remember-me 将来の購入のために「 Remember Me」というオプションを含めるかどうかを指定する(trueまたはfalse)。 デフォルトはtrue。 この機能は、Cookieを設定したり、ブラウザのlocalStorage使用したりできることに依存しており、顧客の「特定のプライバシー設定」が有効になっている場合は利用できない場合がある


Checkout Reference Custom

 閲覧数:273 投稿日:2019-02-26 更新日:2019-03-15 

Custom


Checkoutを起動するために任意のHTML要素またはJavaScriptイベントを使用できる
・カスタム組み込みには堅固なJavaScriptのスキルが必要
・Simple組み込みで必要なすべてのステップを実行する必要がある

ページがロードされたら?
・StripeCheckout.configure()を使ってハンドラオブジェクトを作成する必要がある
・その後、任意のイベントに応答してハンドラーでopen()を呼び出すことができる

チェックアウトプロセスを中止する必要がある場合は?
・例えば、ナビゲーションがsingle-page applicationで行われているときに、ハンドラでclose()を呼び出す
・キーパラメータはconfigure()に渡す必要がある
・他のオプションはconfigure()、またはopen()の何れかへ渡すことができる
<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
 key: 'pk_test_●●',
 image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
 locale: 'auto',
 token: function(token) {
   // You can access the token ID with `token.id`.
   // Get the token ID to your server-side code for use.
 }
});

document.getElementById('customButton').addEventListener('click', function(e) {
 // Open Checkout with further options:
 handler.open({
   name: 'PHPデモ',
   description: '2 widgets',
   currency: 'jpy',
   amount: 2000
 });
 e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
 handler.close();
});
</script>


設定必須

キー 説明
key 公開キー(テスト用または本番用)
token もしくは source チェックアウトプロセスが完了したときに呼び出すコールバック。両方ではなく、トークンコールバックまたはソースコールバックのいずれかを渡す。
チェックアウトは、トークンオブジェクトを使用してトークンコールバックを呼び出し、ソースオブジェクトを使用してソースコールバックを呼び出す。

function(token, args)
tokenは作成されたトークンオブジェクト
token.idは、請求を作成するために使用することも、顧客に添付することもできる
token.emailには、ユーザーが入力した電子メールアドレスが含まれている
argsは、有効な場合、請求先住所と出荷先住所を含むオブジェクトである

function(source, args)
sourceは作成されたSourceオブジェクト
source.idは、請求を作成するために使用することも、顧客に添付することもできる
source.owner.emailには、ユーザーが入力した電子メールアドレスが含まれている
argsは、有効な場合、請求先住所と出荷先住所を含むオブジェクトである

argsオブジェクトの例
{
 // Billing name and address
 "billing_name": "Stripe",
 "billing_address_country": "United States",
 "billing_address_zip": "94111",
 "billing_address_state": "CA",
 "billing_address_line1": "1234 Main Street",
 "billing_address_city": "San Francisco",
 "billing_address_country_code": "US",

 // Shipping name and address
 "shipping_name": "Stripe",
 "shipping_address_country": "United States",
 "shipping_address_zip": "94111",
 "shipping_address_state": "CA",
 "shipping_address_line1": "1234 Main Street",
 "shipping_address_city": "San Francisco",
 "shipping_address_country_code": "US"
}

強く推奨されている設定オプション


以下の設定オプションを使用して、Checkoutの外観と動作を変更する
キー 説明
image ブランドまたは製品の正方形の画像を指す相対URLまたは絶対URL。推奨される最小サイズは128 x 128 px。サポートされている画像の種類は、 .gif 、 .jpeg 、及び.png
name あなたの会社またはウェブサイトの名前
description 販売している製品またはサービスの説明
amount [チェックアウト]ダイアログでユーザーに表示される金額(JPY)。 APIを使用して請求を作成するときに、金額を明示的に含める必要がある。 (また、デフォルトのUSDを変更するには、Checkoutにdata-currencyの値を指定する必要がある)
locale 利用可能な場合、 ユーザーの希望する言語でCheckoutを表示するには、 autoを指定する。 デフォルトでは英語が使用される
zip-code Checkoutが請求先の郵便番号を検証するかどうかを指定する(trueまたはfalse)。 デフォルトはfalseだが、アカウント設定におけるバリデーションfalseによる拒否を有効にするためtrueに設定することを強くお勧めする。日本アカウント未対応
billing-address Checkoutがユーザーの請求先住所を収集するかどうかを指定する(trueまたはfalse)。 デフォルトはfalse

設定オプション

キー 説明
currency 金額の通貨(3文字のISOコード )。 デフォルトはUSD
panel-label チェックアウトフォームの支払いボタンのラベル( Subscribe, Pay {{amount}}など)。 ラベル値に{{amount}}を含めると、ローカライズ版のdata-amount置き換えられる。 それ以外の場合は、ローカライズされたdata-amountがラベルの末尾に追加される。 チェックアウトは、カスタムラベルをユーザーの希望する言語に翻訳しない
shipping-address Checkoutがユーザーの配送先住所を収集するかどうかを指定する(trueまたはfalse)。 デフォルトはfalse
email あなたのユーザーのEメールアドレスを既に知っている場合は、それをCheckoutに提供して事前入力することができる
label 青いボタンに表示されるテキスト。 デフォルトは Pay with Card。 チェックアウトは現在このラベルを翻訳していない
allow-remember-me 将来の購入のために「 Remember Me」というオプションを含めるかどうかを指定する(trueまたはfalse)。 デフォルトはtrue。 この機能は、Cookieを設定したり、ブラウザのlocalStorage使用したりできることに依存しており、顧客の「特定のプライバシー設定」が有効になっている場合は利用できない場合がある
opened function()
Checkoutが開かれたときに呼び出すコールバック
closed function()
Checkoutが閉じられたときに呼び出すコールバック。 トークンまたはソースコールバックの後に呼び出される(トークン化またはソースの作成が成功した場合)

エラー


checkout.js:2 StripeCheckout.configure: The options 'source' and 'token' can not be used at the same time.
You can learn about the available configuration options in the Checkout docs:



Stripe Payments > CHARGES / 料金

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

コメント投稿(ログインが必要)



類似度ページランキング
順位 ページタイトル抜粋
1 Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Checkout Reference 55
2 Stripe Payments > COLLECTING PAYMENT DETAILS > Checkout 47
3 Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Stripe.js and Elements 45
4 Stripe Payments > CHARGES / 料金 38
5 Stripe Payments > SOURCES / ソース 36
6 Stripe Payments > PREPARING FOR SCA > SCA Migration Overview / SCAの移行の概要 35
7 Stripe Payments > PREPARING FOR SCA > Payment Intents 34
8 Stripe Payments > Quickstart / クイックスタート 31
9 Stripe Q48。「Checkout\Session - server」「Charge」「PaymentIntent」の使い分け方 31
10 Stripe Q60. Checkout\SessionオブジェクトとPaymentIntentオブジェクトの関係性は1対1ですか? 30
11 Purchase Fulfillment 29
12 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに 29
13 Stripeで"No such token: src"と表示されたら、最初にAPIキーを確認する 29
14 Stripe Q33。CustomerオブジェクトのcreateSourceメソッドのAPIドキュメントについて 29
15 Stripe Q19。「PaymentIntents」と「Sourceオブジェクト」と「Sources API」の関係について 29
16 Stripe Connect Customアカウント の検討 28
17 Stripe Q53.Checkout\Sessionの1回限りの支払いで、決済完了したユーザにだけページ表示させたい 28
18 Payment Request API 27
19 Stripe Q8。Stripe Checkout public beta version について 27
20 Visa Global Security Summits 27
2024/3/02 7:05 更新
週間人気ページランキング / 2-24 → 3-1
順位 ページタイトル抜粋 アクセス数
1 Omise | 「支払」機能を有する決済系サービス(決済サービス) 12
2 pixivFANBOX | クリエイター支援プラットフォーム(課金販売できるプラットフォーム) 7
3 EPUB | ファイルフォーマット(電子書籍) 6
3 クレジットカード決済 | 課金 6
3 YouTube | 動画サービス(課金販売できるプラットフォーム) 6
3 Stripe Q1。Stripeにおける個人事業主の定義 | QA(Stripe) 6
3 EMVレベル1 / EMVレベル2 / EMVCo とは? 6
4 Twitch | ゲーム実況配信サービス(課金販売できるプラットフォーム) 5
5 サブスクリプション | 課金 4
5 Google Pay | 「支払、出金」機能を有する決済系サービス表(決済サービス) 4
5 EMVCo | クレジットカード仕様(仕様) 4
6 Stripe エラー(Stripe) カテゴリー 3
6 プリペイドカード | カード 3
6 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに | QA(Stripe) 3
7 Stripe Q73.CheckoutのSessionオブジェクトをcreateする際、'payment_intent_data'内の'metadata'として渡したデータを、webhookで受け取る件について | QA(Stripe) 2
7 Payment Request APIとは? / Payment Request API だけで支払い処理が完結するわけではない / Payment Request API の役割 2
7 Something went wrong / You might be having a network connection problem, or the payment provider cannot be reached at the moment. | Stripe エラー(Stripe) 2
7 「支払」と「送金」の違い | 違い 2
8 決済用語 1
8 Stripe Q13。決済成功時に、「請求に紐づけられたメールアドレス」に対して、メール送信したいのですが、 | QA(Stripe) 1
2024/3/2 1:01 更新