FPX の支払いを受け付ける

マレーシアで一般的な支払い方法である FPX を受け付ける方法について説明します。

ウェブ

モバイル

注意

このセクションにはレガシープロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに決済を受け付けるのガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

FPX は 1 回限りの決済手段です。FPX を使用して支払う場合、顧客はお客様のウェブサイトからリダイレクトされ、支払いの送信後に、ウェブサイトに戻ります。ここで、お客様は支払いが成功したか失敗したかに関する即時通知を受け取ります。

FPX 決済を有効にするには、以下の手順に従います。

ダッシュボードで決済手段の設定に移動します。まだ行っていない場合は、Stripe アカウントを有効化します。
銀行へのリダイレクトで FPX を探し、有効にするを選択します。
FPX の利用規約に同意します。

FPX 決済は、マレーシアに拠点を置く加盟店のみ受け付け可能です。Stripe プロダクトがサポートしている国、通貨、決済手段については、決済手段のサポートをご覧ください。

注

FPX は 1 回限りの決済手段のため、継続的な支払いや追加の支払いには使用できません。FPX は現在 Stripe Billing ではサポートされていません。Custom アカウントの FPX 支払いはベータでサポートされています。サポートに関するご質問については、Stripe サポートまでお問い合わせください。

Stripe を設定する
サーバ側

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

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

PaymentIntent を作成する
サーバ側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルの各段階を追跡します。金額が分かり次第 (決済プロセスの最初など)、PaymentIntent を作成してください。PaymentIntent を作成するには、次の値が必要です。

パラメータ	値
`payment_method_types`	fpx
`amount`	最小通貨単位の正の整数で、顧客に請求する金額を表します (たとえば、RM10.99 の支払いの場合は 1099)。Stripe は、取引ごとに最小額の RM2 から最大額の RM30,000 までをサポートしています。
`currency`	myr (FPX は常にリンギットを使用する必要があります)

金額が後で (配送手数料や税金の計算時などに) 変更された場合、amount (金額) を更新することもできます。

支払い方法の詳細を収集する
クライアント側

Stripe Elements は支払い詳細を収集するための事前構築された UI コンポーネントのセットです。Elements は、Stripe.js の機能として自動的に使用可能になります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にそのスクリプトを追加します。Stripe.js を常に js.stripe.com から直接読み込むことで、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

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

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

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Elements には、支払いフォーム内の配置場所が必要です。支払いフォームに一意の ID を持つ空の DOM ノード (コンテナ) を作成し、それらの ID を Elements に渡します。

checkout.html
<form id="payment-form">
  <div class="form-row">
    <div>
      <label for="fpx-bank-element">
        FPX Bank
      </label>
      <div id="fpx-bank-element">
        <!-- A Stripe Element will be inserted here. -->
      </div>
    </div>
  </div>

  <button id="fpx-button" data-secret="{{ CLIENT_SECRET }}">
    Submit Payment
  </button>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

注意

このドキュメントでは、最新バージョンの Stripe.js では使用できなくなったレガシー機能について説明しています。Payment Elementの使用をお勧めします。これは、40 以上の支払い方法を受け付け、入力を検証し、エラーを処理するウェブ用の UI コンポーネントです。

上記のフォームが読み込まれたら、fpxBank Element のインスタンスを作成し、それを上記で作成した Element コンテナーにマウントします。

const style = {
  base: {
    // Add your base input styles here. For example:
    padding: '10px 12px',
    color: '#32325d',
    fontSize: '16px',
  },
};

// Create an instance of the fpxBank Element.
const fpxBank = elements.create(
  'fpxBank',
  {
    style: style,
    accountHolderType: 'individual',
  }
);

// Add an instance of the fpxBank Element into the container with id `fpx-bank-element`.
fpxBank.mount('#fpx-bank-element');

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

クライアント側で支払いを作成するには、ステップ 1 で作成した PaymentIntent オブジェクトの client secret を渡します。

stripe.confirmFpxPayment を使用し、お客様のページからのリダイレクトを処理して支払いを完了します。この機能に return_url を追加して、ユーザーが銀行のウェブサイトまたはモバイルアプリで支払いを完了した後に Stripe がユーザーをリダイレクトする場所を示します。

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

form.addEventListener('submit', async function(event) {
  event.preventDefault();
  const fpxButton = document.getElementById('fpx-button');
  const clientSecret = fpxButton.dataset.secret;

  const result = await stripe.confirmFpxPayment(clientSecret, {
    payment_method: {
      fpx: fpxBank,
    },
    // Return URL where the customer should be redirected after the authorization
    return_url: `${window.location.href}`,
  });

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

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

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

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの client secret。サブスクリプションの実装の場合、この client_secret は `confirmation_secret` を通じて `Invoice` オブジェクトでも公開されます

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

組み込みをテストする

認証の成功と失敗のケース

FPX の組み込みをテストするには、テスト API キーを使用して任意の銀行を選択し、リダイレクトページを表示します。支払い成功のケースをテストするには、リダイレクトページで支払いを認証します。PaymentIntent が requires_action から succeeded に移行します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用して任意の銀行を選択します。リダイレクトページでテスト支払い失敗をクリックします。PaymentIntent が、requires_action から requires_payment_method に移行します。

確認エラーのケース

発生する可能性のあるその他のエラーケースには、オフライン状態の銀行への接続や、確認時の処理エラーなどがあります。これらのエラーを発生させるには、確認の fpx[bank] 値を以下のいずれかのテストエラー銀行値に設定します。PaymentIntent のステータスは requires_confirmation になります。これらのエラーコードの詳細についてはこちらをご覧ください。

パラメータ	値	エラーコード
`fpx[bank]`	`test_offline_bank`	`offline_bank`
`fpx[bank]`	`test_processing_error`	`payment_method_processing_error_transient`

支払い後のイベントを処理する
サーバ側

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボード、カスタム Webhook、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。サポートされているすべての決済手段の違いをご確認ください。

ダッシュボードでイベントを手動で処理する
ダッシュボードを使用して、テスト決済をダッシュボードで表示したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。
Custom Webhook を構築する
Custom Webhook ハンドラを構築してイベントをリッスンし、カスタム非同期型の決済フローを作成します。Stripe CLI を使用して、ローカルで Webhook の導入のテストとデバッグを行います。
構築済みアプリを導入する
パートナーアプリケーションを統合することで、自動化やマーケティング/セールスなどの一般的なビジネスイベントを処理します。

オプションFPX 銀行 Element イベントを処理する

fpxBank Element の設定オプション (style など) は、.update(options) を使用して更新できます。

FPX 銀行 Element は、顧客が選択した銀行が変更されたときにその銀行を出力します。銀行の値を使用して追加のロジック (たとえば、フォーム検証用のフィールドの要求など) を実行する場合は、変更イベントをリッスンできます。

fpxBank.on('change', function(event) {
  var bank = event.value;
  // Perform any additional logic here...
});

変更イベントには、その他の有用なパラメータも含まれています。

パラメータ	説明
`elementType`	Element の名前。デフォルト値は `fpxBank`。
`empty`	`true` の場合、値は空です。
`complete`	`true` の場合、顧客が値を選択済みです。このパラメータを使用して、フォームの残りの部分を段階的に示したり、フォームの送信を有効にしたりできます。
`value`	顧客が Element から選択した FPX 銀行。銀行の完全なリストは FPX ガイドに掲載されています。

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

confirmFpxPayment で FPX リダイレクトと支払いを処理するには、Stripe.js を利用することをお勧めします。ただし、次の方法で顧客を手動でリダイレクトすることもできます。

顧客が支払いを完了した後にリダイレクトされる URL を指定します。
Command Line
言語を選択
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode return_url="https://shop.example.com/crtA6B28E1"
この時点で、Stripe は選択された銀行がオンラインで認証できるかどうかを確認します。その銀行が利用できない場合、Stripe は以下のエラーコードとエラーメッセージを返します。
error_code offline_bank
error_message %{bank} は現在オフラインです。別の銀行をお試しください。
次に、取引を完了するために別の銀行か、支払い方法を選択するように顧客に勧める必要があります。
オフラインの銀行のテスト 以下の値を使用してステップ 2 で PaymentMethod を作成してから、上記のようにそれを PaymentIntent に関連付けることで、前出の offline_bank エラーをテストできます。
パラメータ値
fpx[bank] test_offline_bank

`error_code`	offline_bank
`error_message`	%{bank} は現在オフラインです。別の銀行をお試しください。

パラメータ	値
`fpx[bank]`	`test_offline_bank`

PaymentIntent のステータスが requires_action であることを確認します。next_action のタイプは redirect_to_url になります。

"next_action": {
  "type": "redirect_to_url",
  "redirect_to_url": {
    "url": "https://hooks.stripe.com/...",
    "return_url": "https://example.com/checkout/complete"
  }
}

next_action プロパティで指定された URL に顧客をリダイレクトします。

const action = intent.next_action;
if (action && action.type === 'redirect_to_url') {
  window.location = action.redirect_to_url.url;
}

支払いプロセスを完了した顧客は、return_url の指定先に送られます。payment_intent と payment_intent_client_secret の URL クエリパラメーターが含まれ、上記のように独自のクエリパラメーターを渡すことができます。

チェックアウトおよび支払い確認の要件

決済ページでは、以下の要件に従う必要があります。

要件	詳細
FPX のロゴを表示する。	こちらから FPX ロゴをダウンロードします。
ドロップダウンリストに、FPX の買い手の銀行の選択肢を作成する。	銀行名は、取引銀行に記載されている名前と一致している必要があります。
FPX 利用規約の標準的な表現と URL を提示する。	標準的な表現: 進むボタンをクリックすると、FPX の利用規約に同意することになります。

銀行の認証完了後に顧客が戻る支払い確認ページには、以下の情報を表示する必要があります。

情報	情報のソース
取引日時	`Charge` オブジェクトの `created`。
金額	`Charge` オブジェクトの `amount`。
売り手の注文番号	`Charge` オブジェクトの `statement_descriptor`。
FPX 取引 ID	`Charge` オブジェクトの `payment_method_details[fpx][transaction_id]`。
買い手の銀行名	`Charge` オブジェクトの `payment_method_details[fpx][bank]`。
取引ステータス	`Charge` オブジェクトの `status`。

この情報には、Charge (支払い) からアクセスできます。Charge オブジェクトは、payment_intent.succeeded イベントから取得できます。

API バージョン 2022-08-01 以前を使用するユーザー: この情報には、Charge (支払い) からアクセスできます。Charge オブジェクトは、payment_intent.succeeded イベントから、または直接 PaymentIntent (支払いインテント) から取得できます。

取引銀行

銀行名	値
Affin Bank	affin_bank
Alliance Bank	alliance_bank
AmBank	ambank
Bank Islam	bank_islam
Bank Muamalat	bank_muamalat
Bank Rakyat	bank_rakyat
BSN	bsn
CIMB Clicks	cimb
Hong Leong Bank	hong_leong_bank
HSBC Bank	hsbc
KFH	kfh
Maybank2E	maybank2e
Maybank2U	maybank2u
OCBC Bank	ocbc
Public Bank	public_bank
RHB Bank	rhb
Standard Chartered	standard_chartered
UOB Bank	uob

エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

エラーコード	推奨アクション
`invalid_amount`	FPX 取引は、RM2 より大きく、RM30,000 未満である必要があります。
`invalid_bank`	指定した銀行は FPX では未対応です。上記の取引銀行からいずれかのオプションを使用してください。
`invalid_currency`	FPX は MYR 取引にのみ対応しています。
`missing_parameter`	必要なパラメータがありません。必要なパラメータの詳細については、`error_message` を確認してください。
`offline_bank`	指定した銀行は現在オフラインです。別の銀行または支払い方法のタイプをお試しください。
`payment_method_not_available`	この支払い方法は現在使用できません。戻って別の支払い方法で処理するように、顧客に依頼してください。
`payment_method_processing_error_transient`	予期しないエラーが発生したため、Payment Intent を確定できませんでした。Payment Intent の確定をもう一度お試しください。

入金と送金

コンプライアンス上の理由から、FPX の売上はアカウントの独立した fpx 残高で決済されます。実際、同じ日に 1 つは FPX の売上、もう 1 つはその他すべての売上に対する、2 件の自動入金を別々に受け取る可能性があります。Connect プラットフォームでは、次のように source_type として fpx を指定することにより、fpx 残高から入金を作成または送金できます。

また、残高を取得して、available および pending の Stripe 残高の内訳を source_type ごとに確認することもできます。

注