PayNow による支払いを受け付ける

シンガポールで広く普及している送金サービス PayNow による支払いを受け付けます。

PayNow は 1 回限りの使用の支払い方法です。顧客は加盟銀行や銀行以外の加盟金融機関の任意のアプリを使用して、決済フローで提示される QR コードをスキャンし、支払いを完了します。

Stripe を設定する

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

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

PaymentIntent を作成する
サーバー側

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

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
})();

PayNow の QR コードを表示する
クライアント側

このステップでは、Stripe.js を使用してクライアントで PayNow による支払いを完了させます。Stripe.js スクリプトを決済ページに含めるには、このスクリプトを HTML ファイルの head に追加します。

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

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

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

クライアント側で支払いを確定するには、stripe.confirmPayNowPayment を使用します。

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

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

  // Set the clientSecret here you got in Step 2
  stripe.confirmPayNowPayment(
    clientSecret,
  ).then((res) => {
    if(res.paymentIntent.status === 'succeeded') {
      // The user scanned the QR code
    } else {
      // The user closed the modal, cancelling payment
    }
  });
});

confirmPayNowPayment を呼び出すと、QR コードがウェブページに表示されます。顧客は QR コードをスキャンし、任意のバンキングアプリや決済アプリを使用して、支払いの認証を行うことができます。Stripe が注文のフルフィルメントを実行して、支払いの結果がわかるまで、QR コードが表示されたページに留まる必要があります。

注文のフルフィルメントを実行する
サーバー側

注文のフルフィルメントを処理するには、顧客を支払いのステータスページに戻すのではなく、Webhook のような方法を使用します。顧客が支払いを完了すると、PaymentIntent は succeeded に移行し、payment_intent.succeeded Webhook イベントを送信します。

構築したシステムをテストする

テスト中に、モバイルデバイスの QR コードスキャンアプリケーションを使用して QR コードをスキャンできます。QR コードペイロードには、テスト決済を承認または却下できる Stripe がオンラインで提供する PayNow テスト決済ページにリダイレクトする URL が含まれています。

本番環境では、加盟銀行や銀行以外の加盟金融機関のアプリを使用して QR コードをスキャンすることができます。

注