GrabPay での支払いを受け付ける

東南アジアで一般的な支払い方法である GrabPay を受け付ける方法をご紹介します。

注

現在、サブスクリプションと将来の支払いのための GrabPay の使用には対応していません。これらの機能のサポートに関するご質問は、Stripe サポートまでお問い合わせください。

ウェブ

モバイル

GrabPay は 1 回限りの決済手段です。GrabPay を使用して支払う場合、顧客はアプリから GrabPay にリダイレクトされ、支払いを承認するとアプリに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する即座通知を受け取ります。

注

ダッシュボードで GrabPay を有効にする方法についてご紹介します。

Stripe を設定する
サーバー側

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

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

PaymentIntent を作成する
サーバー側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。

サーバーで PaymentIntent を作成し、回収する amount および通貨 (sgd または myr) を指定します。GrabPay に最少請求金額はないため、支払い金額は 1 まで下げられます。既存の Payment Intents 実装がある場合は、grabpay を決済手段タイプのリストに追加します。

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

Stripe に支払いを送信する
クライアント側

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

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></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'
);

クライアント側で支払いを作成するには GrabPay で支払うボタンを追加し、stripe.confirmGrabPayPayment を使用してページからのリダイレクトを処理して支払いを完了します。

checkout.html
<button type="button" id="grabpay-button">Pay with GrabPay</button>
<div id="error-message"></div>

client.js
const button = document.getElementById('grabpay-button');

button.addEventListener('click', async function() {
  // By this point, the PaymentIntent should have already been created
  // Pass the clientSecret of the PaymentIntent to confirmGrabPayPayment

  stripe.confirmGrabPayPayment(clientSecret, {
    // Return URL where the customer should be redirected after the authorization
    return_url: 'https://example.com/checkout/complete',
  });
});

ステップ 2 で作成した PaymentIntent オブジェクトの client secret を stripe.confirmGrabPayPayment に渡します。

さらに、この機能に return_url を追加し、ユーザーが Grab のウェブサイトで支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指示します。

顧客が支払いを送信すると、Stripe は顧客を return_url にリダイレクトし、以下の URL クエリーパラメーターを含めます。返品ページでは、これらを使用して PaymentIntent のステータスを取得し、顧客に支払いステータスを表示できます。

return_url を指定する際に、返品ページで使用する独自のクエリパラメーターを追加することもできます。

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	The client secret of the `PaymentIntent` object. For subscription integrations, this client_secret is also exposed on the `Invoice` object through `confirmation_secret`

顧客が自社のサイトにリダイレクトされたら、payment_intent_client_secret を使用して PaymentIntent をクエリし、顧客に取引ステータスを表示できます。

order_confirmation.html
<h2>Payment result</h2>
<div class="payment-result">
</div>

<script>
  // Check if we're returning from a redirect.
  const url = new URL(window.location.href);
  const paymentIntentClientSecret = url.searchParams.get(
    "paymentIntentClientSecret"
  );
  if (paymentIntentClientSecret) {
    stripe.retrievePaymentIntent(paymentIntentClientSecret).then(function(result) {
      const paymentIntent = result.paymentIntent;
      document.querySelector(".payment-result").textContent = paymentIntent.status;
    });
  }
</script>

導入をテストする

テスト中、クライアント側のリダイレクトにより、Stripe がオンラインで提供する GrabPay テスト決済ページが表示され、そこでテスト決済を承認または却下できます。

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

オプションGrabPay リダイレクトを手動で処理する

サポートされている通貨

マレーシアとシンガポールの Stripe ユーザは、それぞれマレーシアとシンガポールの顧客から GrabPay による支払いを受け付けることができます。以下のサポートされている通貨と GrabPay の取引限度額を確認してください。

国	顧客の国	サポートされている通貨	取引限度額
シンガポール (SG)	シンガポール (SG)	SGD	GrabPay SG
マレーシア (MY)	マレーシア (MY)	MYR	GrabPay MY

注