Klarna によるサブスクリプションを設定する

Klarna を使用したサブスクリプションの作成と請求の方法をご紹介します。

このガイドを使用して、支払い方法として Klarna を使用するサブスクリプションを設定します。

まず、Stripe アカウントが必要です。今すぐご登録ください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用してください。

商品と価格を作成する
ダッシュボード

Products (商品) は、販売しているアイテムまたはサービスを表します。Prices (価格) は、商品の価格と請求頻度を定義します。これには、商品の価格、受け付ける通貨、および 1 回限りの支払いか継続支払いかが含まれます。商品と価格が数個のみの場合は、ダッシュボードでそれらを作成および管理します。

このガイドでは、例としてストックフォトサービスを使用し、15 USD の月次サブスクリプションを顧客に請求します。これをモデル化するには、次のようにします。

商品を追加ページに移動します。
商品の名前を入力します。
価格に 15 を入力します。
通貨として USD を選択します。
商品を保存をクリックします。

商品と価格を作成したら、価格 ID を記録しておき、後続のステップで使用できるようにします。ID は料金体系ページで price_G0FvDp6vZvdwRZ のように表示されます。

サブスクリプションを作成する
サーバー側

payment_behavior パラメーターに default_incomplete の値を指定して、ステータスが incomplete の価格と顧客の Subscription (サブスクリプション) を作成します。サブスクリプションが有効になったときに支払い方法を保存するには、payment_settings.save_default_payment_method=on_subscription パラメーターを設定します。

レスポンスには、サブスクリプションの最初の請求書)が含まれます。これにはインボイスの支払いが含まれます。これには、Stripe がこのインボイスに対して生成したデフォルトの PaymentIntent と、PaymentIntent オブジェクト全体を渡す代わりにクライアント側で支払いプロセスを安全に完了するために使用できる Confirmation Secret が含まれます。支払いの確定に使用する必要がある PaymentIntent ID を latest_invoice.payments から取得します。latest_invoice.confirmation_secret.client_secret をフロントエンドに返して、支払いを完了します。

トライアルを設定する

無料トライアル付きのサブスクリプションを設定できます。トライアル期間がある有効なサブスクリプションに対する支払いを延期する方法をご紹介します。

支払い情報を収集する
クライアント側

Stripe Elements を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

subscribe.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <!-- content here -->
</body>

購入ページで次の JavaScript を使用して、Stripe のインスタンスを作成します。

subscribe.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Payment Element をページに追加する

決済ページには Payment Element を配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

subscribe.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Subscribe</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

上記のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。サブスクリプションの作成ステップで、フロントエンドに client_secret の値を渡しています。この値を、Elements のインスタンスを作成する際にオプションとして渡します。

subscribe.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。このフォームでは、顧客が選択した支払い方法で必要な支払い詳細のすべてが自動的に収集されます。

支払いを完了する

stripe.confirmPayment を使用して、Payment Element からの詳細を指定した支払いを完了し、サブスクリプションを有効化します。これにより PaymentMethod が作成され、不完全なサブスクリプションの最初の PaymentIntent が確定され、その結果、支払いが実行されます。

Stripe は、最初の支払いと将来の支払いを完了するために、顧客を Klarna にリダイレクトします。return_url を指定して、Klarna での支払いの完了後にユーザーをリダイレクトする URL を指示します。

subscribe.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: "https://example.com/order/123/complete",
      mandate_data: {
        customer_acceptance: {
          type: "online",
          online: {
            infer_from_client: true,
          }
        }
      }
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  }
});

ユーザーがリダイレクトされた後、PaymentIntent をクエリしてそのステータスを確認します。ステータスが succeeded の場合、支払いは成功しており、サブスクリプションは有効になっています。

実装内容をテストする

下記では、現在対応している顧客の国のテストデータを特別に選択しています。サンドボックスでは、Klarna は指定されたメールアドレスに基づいて取引を承認または拒否します。

	承認	拒否
生年月日	1970/10/07	03-05-1994
名	テスト	John
姓	Person-au	snow
町名・番地	Wharf St	Silverwater Rd
番地等	4	1-5
郵便番号	4877	2128
市区町村	Port Douglas	Silverwater
地域	QLD	NSW
電話番号	+61473752244	+61473763254
メールアドレス	customer@email.au	customer+denied@email.au

2 段階認証

6 桁の数字であれば、2 段階認証コードとして有効です。999999 を使用すると、認証は失敗します。

返済方法

Klarna のフロー内では、以下のテスト値を使用し、さまざまな返済方法を試すことができます。

タイプ	値
口座引き落とし	DE11520513735120710131
銀行振込	デモの銀行
クレジットカード	番号: 4111 1111 1111 1111 CVV: 123 有効期限: 任意の将来日付
デビットカード	カード番号:4012 8888 8888 1881 CVV: 123 有効期限: 任意の将来日付