カテゴリー:
documentation
閲覧数:573 配信日:2019-04-11 10:24
docs
Payments > PREPARING FOR SCA > Checkout (new) > Checkout Migration Guide
・Checkout Migration Guide
・レガシーから新しいチェックアウトへの移行
・2019年4月11日時点で、PHPコードが掲載されていないため省略。恐らく作成中なのだと思われ。後で要チェック!
・2019/5/2。Ruby以外のコードも掲載された
従来バージョンのCheckoutから新しいバージョンへの移行方法について説明する
Checkoutのレガシーバージョン
・カード情報を収集し、トークンまたはソースをあなたのウェブサイトに返すモーダルダイアログを顧客に提示した
新バージョンのCheckout
・Stripeがホストするスマートペイメントページで、支払いまたはsubscriptionsを作成する
・Apple Payとダイナミック3Dセキュアをサポートしている
・これから来る多くの機能に備えている
固定価格の簡易製品カタログ / client × 1回限りの支払
固定価格で少数の製品(少数のTシャツや電子書籍など)を販売している場合
・クイックスタートの指示に従って、ダッシュボードに商品を作成し、Webサイトに追加するコードスニペットを生成する
・新バージョンのCheckoutでは自動的に支払いが行われるため、サーバーのシステムは不要だ
▼Checkout (new) client デモ2
<script src="https://js.stripe.com/v3"></script>
<button id="checkout-button">Pay</button>
<div id="error-message"></div>
<script>
const stripe = Stripe('pk_test_xxxx');
const checkoutButton = document.querySelector('#checkout-button');
checkoutButton.addEventListener('click', () => {
stripe.redirectToCheckout({
items: [{
// Define the product and SKU in the Dashboard first, and use the SKU
// ID in your client-side code.
sku: 'sku_EYUuveVPe61SrH',
quantity: 1
}],
successUrl: 'https://xxxx/thanks.php',
cancelUrl: 'https://xxxx/cancel.php',
customerEmail: 'xxxx@yahoo.co.jp',
clientReferenceId: 'order_123',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
</script>
簡単なsubscriptions / client × subscription
単純なサブスクリプションサービス(ソフトウェアへの毎月のアクセスなど)を提供している場合
・クイックスタートの指示に従ってダッシュボードにプランを作成し、Webサイトに追加するコードスニペットを生成する
・新バージョンのCheckoutでは、顧客とsubscriptionsの両方が自動的に作成されるため、サーバーのシステムは不要だ
Checkoutの新バージョンでは
・サポートは予定されているが、サブスクリプションで既存のCustomersを再利用することはまだサポートされていない
▼Checkout (new) client-subscription デモ1
・上記「client デモ2」で、「skuパラメータ」を「planパラメータ」へ変更するだけ
<script src="https://js.stripe.com/v3"></script>
<button id="checkout-button">Pay</button>
<div id="error-message"></div>
<script>
const stripe = Stripe('pk_test_xxxx');
const checkoutButton = document.querySelector('#checkout-button');
checkoutButton.addEventListener('click', () => {
stripe.redirectToCheckout({
items: [{
// Define the product and plan in the Dashboard first, and use the plan
// ID in your client-side code.
plan: 'plan_EuDx4OLwYfha56',
quantity: 1
}],
successUrl: 'https://xxxx/thanks.php',
cancelUrl: 'https://xxxx/cancel.php',
customerEmail: 'xxxx@yahoo.co.jp',
clientReferenceId: 'order_123',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
</script>
動的製品カタログと価格 / server → client × 1回限りの支払
金額や明細が動的に決定される商品を販売している場合(例えば、大規模な商品カタログや寄付など)
・クイックスタートの指示に従って、Checkout Sessions APIをアプリケーションに統合する
Checkoutのサーバーシステムの新バージョン
・従来とは流れが逆になっている
・最初にサーバー上にセッションを作成し、そのIDをクライアントへ渡し、顧客をCheckoutにリダイレクトする
・顧客は成功するとアプリケーションへリダイレクトされる
まずサーバー上にCheckoutセッションを作成する
▼Checkout (new) server デモ1-2、2
$checkoutSession = \Stripe\Checkout\Session::create([
'payment_method_types' => ['card'],
'line_items' => [[
'name' => 'Custom t-shirt',
'description' => 'Your custom designed t-shirt',
'amount' => 500,
'currency' => 'jpy',
'quantity' => 1,
]],
'success_url' => 'https://example.com/success',
'cancel_url' => 'https://example.com/cancel',
]);
次に、セッションIDをクライアントへ渡して、支払いを完了するために顧客をCheckoutにリダイレクトする
const stripe = Stripe('pk_test_xxxx');
stripe.redirectToCheckout({
sessionId: '<?php echo $checkoutSession->id; ?>',
});
動的subscriptions / server → client × subscription
動的に決定される、または他の高度な機能のサポートを必要とするサブスクリプションサービスを提供している場合
・クイックスタートの指示に従って、Checkout Sessions APIをアプリケーションに統合する
Checkoutのサーバーシステムの新バージョン
・従来とは流れが逆になっている
・最初にサーバー上にセッションを作成し、そのIDをクライアントへ渡し、顧客をCheckoutへリダイレクトする
・顧客は成功するとアプリケーションへリダイレクトされる
Checkoutの新バージョンでは
・サポートは予定されているが、サブスクリプションで既存のCustomersを再利用することはまだサポートされていない
まずサーバー上にCheckoutセッションを作成する
▼Checkout (new) server-subscription デモ1
$session = \Stripe\Checkout\Session::create([
'payment_method_types' => ['card'],
'subscription_data' => [
'items' => [[
'plan' => 'plan_123',
'trial_period_days' => 30,
]],
],
'success_url' => 'https://example.com/success',
'cancel_url' => 'https://example.com/cancel',
]);
次に、セッションIDをクライアントへ渡して、支払いを完了するために顧客をCheckoutへリダイレクトする
const stripe = Stripe('pk_test_xxxx');
stripe.redirectToCheckout({
sessionId: '{{CHECKOUT_SESSION_ID}}',
});
Connectプラットフォームとマーケットプレイス
Connectプラットフォームまたはマーケットプレイスを運営しており、接続アカウントを含む支払いを作成する
次の例では、Checkout Sessions APIを使用して直接請求を処理する
まず、接続アカウントの代わりにサーバー上にCheckoutセッションを作成してくれ
▼Checkout (new) server-connect デモ2
$checkoutSession = \Stripe\Checkout\Session::create([
'payment_method_types' => ['card'],
'line_items' => [[
'name' => "Cucumber from Roger's Farm",
'amount' => 200,
'currency' => 'jpy',
'quantity' => 10,
]],
'payment_intent_data' => [
'application_fee_amount' => 200,
],
'success_url' => 'https://xxxx/thanks.php',
'cancel_url' => 'https://xxxx/cancel.php',
], [
'stripe_account' => 'acct_xxxx',
]);
次に、セッションIDをクライアントへ渡して、支払いを完了するために顧客をCheckoutへリダイレクトする
・Stripe.jsを初期化するときは、必ず接続アカウントのIDを指定してくれ
const stripe = Stripe('pk_test_xxxx', {
stripeAccount: 'acct_xxxx',
});
stripe.redirectToCheckout({
// Pass the ID of the Checkout Session you created on your server.
sessionId: '<?php echo $checkoutSession->id; ?>',
})