buy-now-pay-later について
EC事業者向けに、チェックアウトへ後払い決済を追加する手順を案内するスキルです。プロバイダーの選択から主要プラットフォームやカスタムストアの設定まで扱います。
主な機能
- 01プロバイダーとプラットフォームの選定
- 02Shopify、WooCommerce、BigCommerceの設定
- 03Stripeとカスタムストアの導入案内
- 04利用条件の確認と分割払い表示
- 05手数料、規約、紛争への留意点
活用シーン
- 01既存のECチェックアウトへの分割払い追加
- 02対象市場に合う後払いプロバイダーの選択
- 03商品ページへの分割払い情報の表示
- 04決済手段が出ない場合や対象外の場合の調査
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ finsilabs/ awesome-ecommerce-skills --skill buy-now-pay-laterインストール後、Claude Code で/buy-now-pay-laterを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
tile.jsonevals/afterpay-direct-sdk-server-side-integrat/criteria.jsontask.mdevals/bnpl-eligibility-guard-and-messaging-wid/criteria.jsontask.mdevals/stripe-bnpl-payment-methods-integration/criteria.jsontask.md詳細
後払い決済(BNPL)
概要
後払い決済を利用すると、購入者は購入金額を利息なしの4回払い、またはより長期の分割払いで支払えます。チェックアウトでBNPLを提供すると、通常、平均注文額(AOV)が15~40%増加し、高額商品ではチェックアウトの離脱が減少します。主要な3社であるKlarna、Afterpay(英国ではClearpay)、Affirmは、それぞれShopify、WooCommerce、BigCommerceと標準連携しており、カスタムコードを使わずに導入できます。
このスキルを使う場面
- 分割払いによってコンバージョンが大きく向上する、AOVが100~3,000ドルの範囲にある場合
- 価格が理由で、支払い手続きの段階において顧客がチェックアウトを離脱していることが分析で示されている場合
- 競合他社がBNPLを提供しており、カテゴリ内で標準になりつつある場合(ファッション、家電、家具)
- 既存のStripe連携にBNPLを追加する場合(KlarnaとAfterpayはStripeの決済手段として利用できます)
基本手順
ステップ1:利用しているプラットフォームを確認し、適切なBNPL方式を選ぶ
| プラットフォーム | 推奨される方法 | 備考 |
|---|---|---|
| Shopify | Shopify Paymentsで有効化(Klarna、Afterpayが組み込み済み)、またはプロバイダーのアプリをインストール | Shopify PaymentsにはKlarnaとAfterpayが追加の連携なしで含まれています。有効にするだけです |
| WooCommerce | プロバイダー公式のWooCommerceプラグインをインストール | Klarna、Afterpay、Affirmはいずれも公式のWooCommerceプラグインを提供しています |
| BigCommerce | BigCommerce App Marketplaceからインストール | 3社すべてがBigCommerceのネイティブアプリを提供しています |
| カスタム/ヘッドレス | Stripe(Klarna、Afterpay)またはプロバイダーのSDKで有効化 | Stripeを利用する場合は、Payment Intentで決済手段として有効にします。別途SDKは必要ありません |
プロバイダーの比較:
| プロバイダー | 対応市場 | 方式 | 加盟店手数料 | 注文金額の範囲 |
|---|---|---|---|---|
| Klarna | 米国、EU、英国 | 4回払い/分割払い | 約2.49% + 0.30ドル | 10~10,000ドル |
| Afterpay | 米国、オーストラリア、英国、カナダ | 4回払い(6週間) | 4~6% | 35~2,000ドル |
| Affirm | 米国、カナダ | 毎月の分割払い | 消費者向け年率5.99~29.99% | 50~17,500ドル |
推奨:まずKlarnaまたはAfterpayから始めましょう。対応プラットフォームが幅広く、導入の手間も最小限です。月々の分割払いが4回払いより重要となる高額商品(1,000ドル以上)には、Affirmを追加しましょう。
ステップ2:プラットフォームでBNPLを有効にする
Shopify
方法A:Shopify Paymentsを利用する(推奨)
- Settings → Payments → Shopify Payments → Manageに移動します
- Wallets and payment methodsでKlarnaとAfterpayを探し、有効にします
- Saveをクリックします。対象となる注文では、チェックアウトにBNPLの選択肢が自動的に表示されます
- 商品ページにBNPLの案内を追加するには、Shopify App StoreからKlarna On-Site MessagingアプリまたはAfterpay On-Site Messagingアプリをインストールします
方法B:プロバイダーのShopifyアプリを直接インストールする
- Klarna:Shopify App StoreからKlarna Paymentsをインストールします
- Afterpay:Shopify App StoreからAfterpayをインストールします
- Affirm:Shopify App StoreからAffirmをインストールします
各アプリの案内に従ってアカウントを作成すると、決済手段がチェックアウトに自動的に追加されます。
商品ページに分割払いの案内を追加する(Shopify):
KlarnaまたはAfterpayのアプリをインストールした後、Online Store → Themes → Customizeに移動し、商品ページのテンプレートにBNPLの案内ブロックを追加します。価格の下に「利息なしの4回払い、各$X」と表示されます。
WooCommerce
Klarna:
- WordPress.org または WooCommerce Marketplace から Klarna Payments for WooCommerce プラグインをインストールします
- WooCommerce → Settings → Payments → Klarna Payments に移動し、Klarna API の認証情報を入力します
- 支払い方法を有効にし、提供する Klarna の商品(Pay Now、Pay Later、Slice It)を設定します
- 商品ページにメッセージを表示するには、Klarna On-Site Messaging for WooCommerce プラグインをインストールし、Client ID を追加します
Afterpay:
- Afterpay Gateway for WooCommerce プラグインをインストールします
- WooCommerce → Settings → Payments → Afterpay に移動し、Afterpay の加盟店ポータルで取得した Merchant ID と Secret Key を入力します
- Afterpay の利用条件の範囲($35~$2,000)に合わせて、注文金額の最小値と最大値を設定します
- サイト上のメッセージウィジェットを有効にして、商品ページに分割払いの金額を表示します
Affirm:
- Affirm Gateway for WooCommerce プラグインをインストールします
- WooCommerce → Settings → Payments → Affirm に移動し、Affirm の加盟店ポータルで取得した Public API Key と Private API Key を入力します
- 注文金額の最小値を設定します(Affirm は $50 以上の注文にのみ表示することを推奨しています)
BigCommerce
- Apps → Marketplace に移動し、Klarna、Afterpay、または Affirm を検索します
- プロバイダーのアプリをインストールし、アプリ内のセットアップウィザードに従います。プロバイダーのポータルで取得した加盟店アカウントの認証情報が必要です
- アプリはチェックアウトに BNPL の支払い方法を自動的に追加し、商品ページにメッセージを表示することもできます
- プロバイダーが対応する範囲に合わせて、アプリの設定で利用可能な金額を設定します
Custom / Headless
Stripe 経由(推奨 — 個別の SDK なしで Klarna と Afterpay を利用できます):
// Server: include BNPL methods on the payment intent
const paymentIntent = await stripe.paymentIntents.create({
amount: orderTotalInCents,
currency: 'usd',
payment_method_types: ['card', 'klarna', 'afterpay_clearpay'],
metadata: { order_id: orderId },
});
クライアントでは Stripe の PaymentElement を使用します。追加の設定なしで、対象となる注文金額の場合に Klarna と Afterpay のタブが自動的に表示されます。
import { PaymentElement } from '@stripe/react-stripe-js';
function CheckoutForm() {
return (
<form>
<PaymentElement options={{ layout: 'tabs' }} />
{/* Tabs render: Card | Klarna | Afterpay based on eligibility */}
</form>
);
}
商品ページへの分割払いメッセージの追加(ヘッドレス):
Klarna は、価格メッセージを表示する Web コンポーネントを提供しています。Klarna のスクリプトを読み込み、コンポーネントを追加します。
<script async src="https://js.klarna.com/web-sdk/v1/klarna.js"
data-client-id="YOUR_KLARNA_CLIENT_ID">
</script>
<klarna-placement
data-key="credit-promotion-auto-size"
data-locale="en-US"
data-purchase-amount="9999">
</klarna-placement>
Afterpay も同様の Web コンポーネントを提供しています。
<afterpay-placement
data-locale="en_US"
data-currency="USD"
data-amount="99.99"
data-size="sm">
</afterpay-placement>
ステップ 3:利用条件が適用されることを確認する
各プロバイダーには、注文金額の最小値と最大値があります。プラットフォームアプリと Stripe の PaymentElement がこれを自動的に処理するため、注文合計が対象範囲内の場合にのみ BNPL オプションが表示されます。最小金額を下回る注文(BNPL が表示されないこと)と、範囲内の注文(BNPL が表示されること)をテストして、正しく機能していることを確認してください。
ベストプラクティス
- Shopify を利用している場合は Shopify Payments 経由で有効にします — 追加の連携は不要で、支払い設定でオンにするだけです
- 商品ページとカートに分割払いメッセージを表示します — チェックアウト前に BNPL のメッセージを表示すると、最終的に一括払いを選ぶ顧客にも効果があり、AOV が向上します
- 対象となる金額の範囲内でのみ BNPL を表示します — $10 の注文に BNPL を表示すると顧客に誤解を与えます。プラットフォームアプリがこれを自動的に処理します
- 手数料が利益率に与える影響を監視します — Afterpay の手数料は 4~6%で、一般的なカード手数料の 2~3 倍です。有効にする前に、プロバイダーの手数料率に対応できる利益率であることを確認してください
- 明確な条件を表示します — 「利息なしの 4 回払い」という表現は正確でなければなりません。各プロバイダーには、商品をどのように説明できるかについてコンプライアンス要件があります
よくある問題
| 問題 | 解決策 |
|---|---|
| チェックアウト時にBNPLオプションが表示されない | 注文金額がプロバイダーの対象範囲内であることを確認します。プラグイン/アプリの設定にあるAPI認証情報が正しい環境(本番環境とサンドボックスのいずれか)のものであることを確認します |
| 対象外の注文金額でもBNPLが表示される | プラグインの設定で最低金額と最高金額のしきい値を設定します。StripeのPaymentElementではこれが自動的に適用されます |
| バリエーションの価格が変わっても商品ページのメッセージが更新されない | KlarnaとAfterpayのWebコンポーネントはdata-purchase-amount属性を読み取ります。価格が変わったときに、この属性をJavaScriptで更新します |
| BNPLの利用条件について顧客が混乱している | メッセージウィジェットにプロバイダーの「利用方法」ページへのリンクを設定します。各プロバイダーには、従う必要がある準拠済みのメッセージテンプレートがあります |
| BNPL注文で異議申し立て率が高くなる | BNPLの異議申し立ては決済処理業者ではなく、プロバイダー(Klarna、Afterpay)を通じて行われます。フルフィルメントプロセスで、追跡情報と配達確認が明確に記録されるようにします |
関連するスキル
- @stripe-integration
- @checkout-flow-optimization
- @paypal-integration
- @cart-logic