Stripe Checkoutを利用することで、オンラインでの注文フォームを数行のコードで実装できます。
const session = await stripe.checkout.sessions.create({
line_items: [{
price: 'price_xxxx',
quantity: 1,
}],
success_url: 'http://localhost:3000',
cancel_url:'http://localhost:3000',
mode: 'payment'
})
注文画面では、顧客の地域とStripeユーザーの設定に応じて決済情報入力画面が柔軟に表示されるため、複数の決済方法へのサポートもより簡単になります。
注文前に、カートの中の商品の数を増減させる
ECなどのユースケースでは、１つのアイテムを複数個注文することもあります。
その場合、顧客としては、注文ページでも個数の変更やカートからの商品削除ができるととても助かります。
Stripe Checkoutで、カートの中の商品点数を変更できるようにする
Stripe Checkoutでは、line_itemsにadjustable_quantityを設定することで、個数変更機能を有効化できます。
const session = await stripe.checkout.sessions.create({
line_items: [{
price: 'price_xxxx',
quantity: 1,
+ adjustable_quantity: {
+ enabled: true,
+ }
}],
success_url: 'http://localhost:3000',
cancel_url:'http://localhost:3000',
mode: 'payment'
})
有効化すると、[数量]ラベル横の数字をクリックして数量変更画面を開くことができます。
商品をカートから削除できるようにする
この機能を有効化した場合、[カートの中身が空にならなければ]商品を削除することもできます。
最低注文数を設定し、商品をカートから削除できないようにする
「メイン商品」と「付属商品」のセット販売や合わせ買いなど、カートから削除して欲しくない商品が発生するケースも存在します。
また、セールなどでは、「３点以上注文」のような条件付けを行いたい場合もあります。
その場合、minimumを設定することで、商品の数量を指定数より少なくできないようにしましょう。
const session = await stripe.checkout.sessions.create({
line_items: [{
price: 'price_xxxx',
quantity: 2,
adjustable_quantity: {
enabled: true,
+ minimum: 2,
}
}],
success_url: 'http://localhost:3000',
cancel_url:'http://localhost:3000',
mode: 'payment'
})
minimumを設定すると、数量変更画面でエラーメッセージを表示し、指定数より少なくできないようになります。
なお、quantityの数値よりも大きい数字を設定すると、APIエラーが発生しますのでご注意ください。
## 数量の上限を設定し、買い占めを防止する
反対に在庫数が限られるケースなどでは、一人当たりの注文数の上限を設定したい場合もあります。
その場合は、maximumを設定しましょう。
const session = await stripe.checkout.sessions.create({
line_items: [{
price: 'price_xxxx',
quantity: 2,
adjustable_quantity: {
enabled: true,
+ maximum: 10,
}
}],
success_url: 'http://localhost:3000',
cancel_url:'http://localhost:3000',
mode: 'payment'
})
なお、maximumが未設定の場合、９９まで選ぶことができます。
意図しない大量注文を防止するためにも、常に設定しておくことをおすすめします。
組み合わせて設定する
adjustable_quantityは商品ごとに設定ができます。
ですので、以下の例のように、商品ごとに数量を個別設定することも可能です。
const session = await stripe.checkout.sessions.create({
line_items: [{
price: 'price_xxxx',
quantity: 2,
adjustable_quantity: {
enabled: true,
maximum: 10,
}
}, {
price: 'price_yyyy',
quantity: 2,
adjustable_quantity: {
enabled: true,
maximum: 20,
minimum: 2,
}
}],
success_url: 'http://localhost:3000',
cancel_url:'http://localhost:3000',
mode: 'payment'
})
-
price_xxxxは、カートから削除できます。ただし、１1点以上注文することはできません -
price_yyyyは、２０点まで注文できます。ただし、最低でも２点は注文する必要があります
カートの中身が変更された結果を取得したい
システム側で、顧客が数量を変更した後の情報を取得するには、checkout.sessions.listLineItems APIを使用します。
const session = await stripe.checkout.sessions.create({...})
const items = await stripe.checkout.sessions.listLineItems(
session.id, //'cs_xxxxx'から始まるID,
{ limit: 5 },
);
console.log(items)
'cs_xxxxx'から始まるCheckoutのセッションIDを渡すことで、今現在のカートの中身を取得できます。
{
object: 'list',
data: [
{
id: 'li_xxxxx',
object: 'item',
amount_subtotal: 2000,
amount_total: 2000,
currency: 'jpy',
description: '食料品',
price: [Object],
quantity: 2
},
{
id: 'li_yyyyyy',
object: 'item',
amount_subtotal: 6000,
amount_total: 6000,
currency: 'jpy',
description: 'Starter plan',
price: [Object],
quantity: 6
}
],
has_more: false,
url: '/v1/checkout/sessions/cs_test_xxxxxx/line_items'
}
以下のようなユースケースで、このAPIを利用することができます。
- Checkoutセッションが中断された場合に、セッションIDを利用してカートの中身を復元する
- Webhookで注文を受け付け、発送業務系システムが注文内容を受け取るために利用する
- 注文完了後、Checkoutセッションからリダイレクトされたページで、注文内容を表示させる
おわりに
Checkoutの数量変更機能を利用することで、EC機能を開発するコストをより少なくできます。
また、注文完了後の業務で活用できるAPIも用意していますので、ぜひお試しください。
[PR] Stripe開発者向け情報をQiitaにて配信中！
- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)
など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。