こんにちは、ひょうどうです。
今回は、Stripe Checkout Session（以下 Checkout と略す） で初回決済に使用したクレジットカード（以下カードと略す）をデフォルトカードに設定する方法を紹介します。
Checkout で初回決済に使用したカードは顧客のデフォルトカードにはならないため、2 回目以降に Stripe Charges API を活用した 1 クリック購入フローを実現することができません。
そこで、初回決済が行われた後、以下で紹介するデフォルトカードに設定する処理をすることで、2 回目以降から 1 クリック決済を実現することができます。
-
デフォルトカードではない状態（Checkout 決済後）
-
デフォルトカード状態（処理後）
それでは早速紹介します。
登録されているカードをデフォルトカードに設定する方法
export const setupCardDomain = async (customerId: string): Promise<void> => {
// 顧客の決済情報を取得
const { data: paymentMethodsList } = await stripeClient.paymentMethods.list({
customer: customerId,
});
// カード決済のみにフィルタする
const cardPaymentMethodsList = paymentMethodsList.filter(
({ card }) => !!card
);
// カード情報がない場合スキップ
if (cardPaymentMethodsList.length === 0) {
return;
}
// デフォルトカードに設定
await stripeClient.customers.update(customerId, {
invoice_settings: {
default_payment_method: cardPaymentMethodsList[0].id,
},
});
};
こちらの関数をサブスク完了後、または Checkout 完了後に実行すると良いでしょう。
Webhook イベント例
- customer.subscription.updated
- checkout.session.completed
デフォルトカードが登録されているかどうか判定する方法
export const getIsDefaultCardByCustomerId = async (
customerId: string
): Promise<boolean> => {
const customer = await stripeClient.customers.retrieve(customerId);
if (customer.deleted === true) {
return false;
}
return !!customer.default_source;
};
こちらの関数を活用することで、初回決済時のみ Checkout を活用し、2 回目以降からは Checkout を挟まずに決済を行えるため、購入フローを省略することができます。
まとめ
本記事では、Stripe Checkout Session で初回決済に使用したクレジットカードをデフォルトカードに設定する方法を紹介しました。
1 クリック決済は非常に便利な機能でリピートの多いサービスではユーザー満足度に影響してくる重要な機能です。
今回の知見が読者のサービス向上につながれば幸いです。
ご一読ありがとうございました。
参考文献
Discussion