Mondu による支払いを受け付ける非公開プレビュー

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

ウェブ

Payment Element を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込み、顧客に決済手段を提供します。高度な設定とカスタマイズについては、決済の受け付けに関する導入ガイドをご覧ください。

Stripe を設定する
サーバー側

開始するには、Stripe アカウントを作成を作成します。

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

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

Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。決済手段によっては、支払い確認のために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

実装を機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用せずに実装をテストすることはできますが、本番環境で支払いを受け付ける準備が整ったら、忘れずに有効にしてください。

Stripe.js を設定する

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

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

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

checkout.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 ノード (コンテナー) を作成します。

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

上記のフォームが読み込まれたら、mode、amount、currency を指定して Elements インスタンスを作成します。これらの値によって、顧客に表示される決済手段が決まります。フォームで新しい決済手段を指定するには、必ずダッシュボードで有効にしてください。

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'eur',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
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');

Elements プロバイダーを作成する際に Appearance (デザイン) オブジェクトを options に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

住所を収集

デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。

PaymentIntent を作成する
サーバー側

支払い確定の直前にカスタムのビジネスロジックを実行する

支払いの確定ガイドのステップ 5 に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で stripe.confirmPayment を使用して、支払いの確定と次のアクションの処理の両方を行います。

顧客が支払いフォームを送信したら、PaymentIntent を使用して確認と支払いのプロセスを適切に管理します。amount と currency を指定してサーバー側で PaymentIntent を作成します。悪意のある顧客が独自の価格を選択できないように、請求金額はクライアント側ではなく、常にサーバー側 (信頼できる環境) で決定してください。

PaymentIntent には、client secret が含まれています。この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。

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

stripe.confirmPayment を使用して、Payment Element の詳細を使って支払いを完了します。

この関数に return_url を指定して、支払い完了後に Stripe がユーザーをリダイレクトする場所を示します。ユーザーは、最初に銀行の認証ページなどの中間サイトにリダイレクトされてから、return_url にリダイレクトされる場合があります。カード支払いでは、支払いが成功するとすぐに return_url にリダイレクトされます。

支払い完了後にカード支払いのリダイレクトを行わない場合は、redirect を if_required に設定できます。これにより、リダイレクトベースの決済手段で購入した顧客のみがリダイレクトされます。

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

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

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

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

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

オプションオーソリとキャプチャの分離

オーソリとキャプチャーを分離して支払いを今すぐ作成し、後で売上をキャプチャーできます。7 日間の期間中に支払いがキャプチャーされなかった場合でも、Stripe は PaymentIntent をキャンセルし、payment_intent.canceled イベントを送信します。

支払いをキャプチャーできないことが確実な場合は、7 日間が経過するのを待つのではなく PaymentIntent をキャンセルすることをお勧めします。

オーソリのみを行うよう Stripe に指示する

オーソリとキャプチャーの分離をを指定するには、PaymentIntent の作成時に、capture_method を manual に設定します。このパラメーターは、顧客の Mondu アカウントの金額のみをオーソリするよう Stripe に指示します。

売上をキャプチャーする

オーソリが成功すると、PaymentIntent ステータスが requires_capture に移行します。オーソリされた売上をキャプチャーするには、PaymentIntent キャプチャーリクエストを実行します。

Stripe はオーソリされた合計金額をデフォルトでキャプチャーしますが、amount_to_capture を合計金額またはそれ以下に指定することもできます。

任意オーソリをキャンセルする

オーソリを取り消す必要がある場合は、PaymentIntent をキャンセルできます。

実装内容をテストする

実装内容をテストするには、決済手段を選択して支払うをタップします。サンドボックスでは、テスト決済ページにリダイレクトされ、そこで決済を承認または拒否できます。

本番環境では、支払うをタップすると、Mondu のウェブサイトにリダイレクトされます。Mondu で支払いを承認または拒否するオプションはありません。

エラーコード

次の表に、一般的なエラーコードと推奨される対応の詳細を示します。

エラーコード	推奨される対応
`payment_intent_invalid_currency`	対応している通貨を入力してください。
`missing_required_parameter`	必須パラメーターの詳細については、エラーメッセージをご確認ください。
`payment_intent_payment_attempt_failed`	このコードは、PaymentIntent の last_payment_error.code フィールドに表示されることがあります。エラーメッセージで、エラーの詳細な理由とエラー処理に関する提案を確認してください。
`payment_intent_authentication_failure`	このコードは、PaymentIntent のlast_payment_error.code フィールドに表示されることがあります。エラーメッセージで、詳細な失敗理由とエラー処理に関する推奨事項を確認してください。このエラーは、統合のテスト時に失敗を手動でトリガーした場合に発生します。
`payment_intent_redirect_confirmation_without_return_url`	PaymentIntent を確定する際は、`return_url` を指定します。

注