カテゴリー:
Stripe
閲覧数:344 配信日:2019-02-18 11:49
docs
Payments ＞ PREPARING FOR SCA ＞ Checkout (new) ＞ Checkout Client
・Checkout Client Quickstart
・チェックアウトクライアントのクイックスタート
・ダッシュボードで定義された商品やsubscriptionを販売するには、チェックアウトを使用する
・Dashboardを使用してSKUとプランを作成することで、CheckoutのClient-only を迅速に開始する
CheckoutのClient-only 開始
次の手順を使用して、顧客が商品やプランを購入するためのチェックアウトページを作成する
1.ダッシュボードでチェックアウトを有効にする
2.製品、SKU、計画を設定する
3.あなたのウェブサイトにチェックアウトを組み込む
※Checkoutを使用するには、WebサイトまたはアプリケーションがHTTPS対応でなければならない
ステップ1：ダッシュボードでチェックアウトを有効にする
Checkoutの使用を開始するには？
・Stripe Dashboardにログインし、 Checkout設定に移動して、[ Checkout を有効にする ]ボタンをクリックする
ステップ2：製品、SKU、および計画を設定する
販売予定の商品とサービスを定義
・ダッシュボードの[ 商品 ]セクションで、販売予定の商品とサービスを定義する
・新しい商品を作成するには、[ 商品 ]セクションに移動して[ 新規 ]ボタンをクリックし、販売する商品の種類を選択する
・指定した固有の名前と画像は、チェックアウト時に顧客に表示される
注意事項1.
・製品はテストモードとライブモードで別々に設定されている
・一方のモードで追加した製品は他方のモードでは使用できない
・ライブモードキーに切り替える前に、必ず製品をライブモードに設定してくれ
注意事項2.
アップロードする画像は 512 kb 未満にしてください
1回限りの購入商品を作成
・ダッシュボードで1回限りの購入商品を作成すると、Stripeはその商品と同じ名前でデフォルトのSKUを作成し、そのSKUのIDを生成する(生成されたIDを割り当てる)
・このSKU IDは、Checkoutで支払い処理を開始するときに、顧客が購入している商品をどのように参照するか、だ
subscriptionを作成
・ダッシュボードでProductを作成すると、 料金プランを定義するように求められる
・定期商品ごとに異なるパラメータを使用して、複数の料金プランを定義できる
・各プランには生成されたIDがあり、これを使用してチェックアウトプロセス中にプランを参照できる
・ここから無料試用版を定義することもできる
※Productはテストモードとライブモードで別々に設定されている。 一方のモードで追加したProductは他方のモードでは使用できない。 ライブモードキーに切り替える前に、必ずライブモードでProductを設定してくれ
ステップ3：あなたのウェブサイトにチェックアウトを組み込む
WebサイトにCheckoutを追加するには？
・目的のSKUまたはプランIDを含むコードを追加する必要がある
・ダッシュボードを使って必要なコードを生成することも、自分で書くこともできる
コードスニペットの役割
・ボタンをページに追加し、クリックすると顧客をCheckoutにリダイレクトする
・「クリックされると顧客をCheckoutにリダイレクトするボタン」をページに追加する
・顧客が支払いを正常に完了すると、コードスニペットの設定時に指定した成功URLにリダイレクトされる
・通常、これは、支払いが成功したことを顧客に知らせるためのWebサイト上のページだ
・キャンセルURLは、支払い処理をキャンセルしたときにCheckoutが顧客にリダイレクトするページだ
！要点
・「A.ダッシュボードで生成する」も「B.自分で書く」も結果は同じ。コードも同じ
・要は、コードを全て手入力するか、最低限必要事項のみをフォームへ入力してコード生成するか、の違い
A.ダッシュボードで生成する
・ダッシュボードの[ 商品 ]セクションで、販売する商品を選択する
・商品詳細ビューで、SKUの横にある[ Checkoutで使用 ]ボタンをクリックすると、Webサイトに追加できるコードスニペットが生成される
・スニペットをWebページの本文にコピーして貼り付けると、顧客をCheckoutにリダイレクトする支払いボタンが追加される
B.自分で書く
・チェックアウトはStripe.jsに依存している
・開始するには、Webサイトに次のスクリプトタグを含める
・これは常にhttps://js.stripe.comから直接ロードする必要がある
<script src="https://js.stripe.com/v3/"></script>
・次に、publishable APIキーを最初のパラメータとして指定して、Stripeオブジェクトのインスタンスを作成する
var stripe = Stripe('pk_test_xxxx');・下記はbetaバージョンの頃(2019/04/15以前)の書き方
var stripe = Stripe(
'pk_test_xxxx',
{
betas: ['checkout_beta_4']
}
);
・顧客が支払いの準備ができたら、redirectToCheckoutを呼び出してチェックアウトプロセスを開始する
・SKUまたはプランIDと、顧客が購入したい各品目の数量を指定するオブジェクトの配列を渡す
stripe.redirectToCheckout({
items: [
// Replace with the ID of your SKU
{sku: 'sku_123', quantity: 1}
],
successUrl: 'https://your-website.com/success',
cancelUrl: 'https://your-website.com/canceled',
}).then(function (result) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
});支払いが成功したら
あなたは顧客の購入処理を行うべきだ
・checkout_beta.session_succeededイベントがトリガーされたときに、購入を完了するためにwebhookを使用することができる
・checkout.session.completedイベントがトリガーされたときに、Webhookを使用して購入を完了できる
・Checkoutを使用した購入処理の処理の詳細については、 資料を参照してくれ
購入完了判定
・顧客が支払いを成功させたときにsuccessページにアクセスするとは限らないため、購入完了確認をsuccessページへのリダイレクトに頼るべきではない
「Checkoutによる購入の実現」で説明されている戦略のいずれかを使用してくれ
・以下のように、購入を遂行するためにsuccessUrlへのリダイレクトだけに頼らないでくれ
・悪意のあるユーザーは、支払いをせずにsuccessUrlに直接アクセスして、商品やサービスにアクセスする可能性がある
・顧客は、支払いが成功した後に必ずしもsuccessUrlに到達するとは限らない。 リダイレクトが発生する前にブラウザのタブを閉じる可能性がある
オプション：顧客データの事前入力
顧客のメールアドレスを既に知っている場合
・顧客が自分の支払い情報を二度入力する必要性を避けるために、あなたは、チェックアウトページに事前に記入したい顧客についての情報をすでに集めているかもしれない
・redirectToCheckout呼び出しでcustomerEmailを指定することで、チェックアウトページで顧客の電子メールを事前に入力できる
▼Checkout (new) betaバージョンではなくなった-client デモ1
stripe.redirectToCheckout({
items: [
// Replace with the ID of your SKU
{sku: 'sku_123', quantity: 1}
],
successUrl: 'https://your-website.com/success',
cancelUrl: 'https://your-website.com/canceled',
customerEmail: 'customer@example.com'
}).then(function (result) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
});