Alma による決済を受け付ける

Alma の導入の設定方法をご紹介します。

ウェブ

モバイル

Alma は 1 回限りの決済手段であり、顧客は 2 回、3 回、4 回の分割払いを選択できます。顧客は、ウェブサイトまたはアプリからリダイレクトされ、Alma で支払いを承認すると、ウェブサイトまたはアプリに戻されます。お客様は支払いが成功したか失敗したかに関する即時通知を受け取ります。

Stripe を設定する
サーバー側

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

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

PaymentIntent を作成する
サーバー側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで PaymentIntent を作成し、回収する金額とサポートされている通貨を指定します。すでに Payment Intents のシステムがある場合は、支払い方法のタイプのリストに alma を追加します。

PaymentIntent には client secret が含まれています。client secret は、支払いプロセスを安全に完了するためにクライアントに送られ、PaymentIntent オブジェクト全体を渡す必要をなくします。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Alma にリダイレクトする
クライアント側

顧客が Alma での支払いをクリックしたときに、Stripe.js を使用してその支払いを Stripe に送信します。Stripe.js は、決済フローを構築するための基本的な JavaScript ライブラリです。このライブラリにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、他の決済手段にも対応できるように実装を拡張できます。Stripe.js スクリプトを決済ページに含めるには、HTML ファイルの head にこのスクリプトを追加します。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。

client.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'
);

PaymentIntent の client secret を使用し、stripe.confirmPayment を呼び出して Alma リダイレクトを処理します。return_url を追加して、支払いが完了した後に Stripe が顧客をリダイレクトする場所を決定します。

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

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

  // Set the clientSecret of the PaymentIntent
  const { error } = await stripe.confirmPayment({
    clientSecret: clientSecret,
    confirmParams: {
      payment_method_data: {
        type: 'alma',
      },
      // Return URL where the customer should be redirected after the authorization
      return_url: `${window.location.href}`,
    },
  });

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('error-message');
    errorElement.textContent = result.error.message;
  }
});

return_url は支払いの結果を表示するウェブサイト上のページに相当します。PaymentIntent のステータスを確認して、表示内容を決定できます。ステータスを確認するため、Stripe は以下の URL クエリパラメーターを含む return_url にリダイレクトします。return_url には自社のクエリパラメーターを追加することもできます。これらのパラメーターはリダイレクトプロセス全体にわたって存続します。

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの client secret。

オプションリダイレクトを手動で処理する
サーバー側

オプション支払い後のイベントを処理する

サポートされている通貨

お客様の国に対応する通貨で Alma での支払いを作成できます。Alma のデフォルトの現地通貨は eur で、顧客は購入金額を eur でも確認できます。

通貨	国
`eur`	France, Italy, Spain, Netherlands, Belgium, Luxembourg

注

Alma による決済を受け付ける

Alma の導入の設定方法をご紹介します。

Stripe を設定するサーバー側

PaymentIntent を作成するサーバー側