EPS の支払いを受け付ける

オーストリアで一般的な支払い方法である EPS を受け付ける方法をご紹介します。

ウェブ

モバイル

注意

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

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

注

EPS を使用する際は、EPS 利用規約に従う必要があります。

Stripe を設定する
サーバ側

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

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

PaymentIntent を作成する
サーバ側

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

サーバーで PaymentIntent を作成し、回収する amount と eur 通貨を指定します (EPS は他の通貨に対応していません)。既存の Payment Intents のシステムがある場合は、eps を決済手段タイプのリストに追加します。

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 Elements を使用してクライアントで支払い情報を収集する準備ができました。Elements は、支払いの詳細を収集するための構築済み UI コンポーネントのセットです。

Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。

HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効化します。

Stripe Elements を設定する

Stripe Elements は Stripe.js の機能として自動的に使用できるようになります。支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの head にこのスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、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();

epsBank Element を追加して設定する

注意

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

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

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

const options = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

// Create an instance of the epsBank Element
const epsBank = elements.create('epsBank', options);

// Add an instance of the epsBank Element into
// the `eps-bank-element` <div>
epsBank.mount('#eps-bank-element');

Elements は全面的にカスタマイズできます。ご使用のサイトのデザインに合わせて Elements のスタイルを設定することで、顧客にシームレスな決済体験を提供できます。Element が選択されているときなど、さまざまな入力状態のスタイルを設定することもできます。

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

PaymentIntent オブジェクト全体をクライアントに送信するのではなく、client secret を使用します。これは、 Stripe API リクエストを認証する API キーとは異なります。client secret は支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に含めたり、当該の顧客以外に漏洩することがないようにしてください。

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

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

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

  // Redirects away from the client
  const {error} = await stripe.confirmEpsPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        eps: epsBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    }
  );
});

顧客が支払いを送信すると、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 をクエリし、顧客に取引ステータスを表示できます。

顧客が支払いの実行に使用した銀行口座の詳細は、生成された Charge の payment_method_details プロパティで確認することができます。

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "eps": {
            "bank": "bank_austria",
            "verified_name": "JENNY ROSEN"
          },
          "type": "eps"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",

組み込みをテストする

テスト API キーを使用して、EPS 銀行リストの中から任意の銀行を選択します。支払いを確定後、テストページにリダイレクトされます。そこには、支払いを成功させるか、失敗させるかを選択するオプションがあります。支払い成功のケースをテストするには、リダイレクトページで支払いを認証します。PaymentIntent が、requires_action から succeeded に移行します。

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

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

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

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

イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

ダッシュボードでテスト支払いを確認する

カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

カスタム Webhook を作成する

事前構築のアプリ

オートメーションやマーケティングとセールスなどの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。

オプションEPS 銀行 Element の変更を処理する
クライアント側

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

epsBank.on('change', (event) => {
  const bank = event.value;
  // Perform any additional logic here...
});

変更イベントには、より充実したユーザー体験の構築に役立つパラメーターが他にも含まれています。詳細については、Stripe.js リファレンスをご覧ください。

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

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

顧客が支払いを完了した後にリダイレクトされる URL を指定します。
オプションで顧客の銀行を指定し、そこに顧客をリダイレクトして支払いをオーソリできるようにします。利用可能な銀行のリストは、銀行の値セクションで確認できます。

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"
    }
  },
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "eps": {
          "bank": "bank_austria",
          "verified_name": "JENNY ROSEN"

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 クエリパラメーターが含まれ、上記のように独自のクエリパラメーターを渡すことができます。

オプション顧客の銀行設定を保存する
クライアント側

EPS PaymentMethods を再利用したり、顧客に保存したりすることはできません。顧客が決済フローでこの支払い方法を選択するたびに、EPS 銀行 Element を使用して新たに EPS PaymentMethod を作成する必要があります。顧客の銀行設定を追跡するには、お客様のデータベースに顧客の設定を保存するか、Customer オブジェクトの metadata プロパティーを使用します。

Element 作成時の顧客の銀行設定を、EPS 銀行 Element に事前入力できます。

const options = {
  // Include the bank name along with any custom styling
  value: "bank_austria",
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
}

// Create an instance of the Element
const epsBank = elements.create('epsBank', options);

// Mount the Element
epsBank.mount('#eps-bank-element');
TODO: highlight: [3]

銀行の値

銀行名	値
Ärzte- und Apothekerbank	arzte_und_apotheker_bank
Austrian Anadi Bank AG	austrian_anadi_bank_ag
Bank Austria	bank_austria
Bankhaus Carl Spängler & Co.AG	bankhaus_carl_spangler
Bankhaus Schelhammer & Schattera AG	bankhaus_schelhammer_und_schattera_ag
BAWAG P.S.K. AG	bawag_psk_ag
BKS Bank AG	bks_bank_ag
Brüll Kallmus Bank AG	brull_kallmus_bank_ag
BTV VIER LÄNDER BANK	btv_vier_lander_bank
Capital Bank Grawe Gruppe AG	capital_bank_grawe_gruppe_ag
Dolomitenbank	dolomitenbank
Easybank AG	easybank_ag
Erste Bank und Sparkassen	erste_bank_und_sparkassen
Hypo Alpe-Adria-Bank International AG	hypo_alpeadriabank_international_ag
HYPO NOE LB für Niederösterreich u. Wien	hypo_noe_lb_fur_niederosterreich_u_wien
HYPO Oberösterreich, Salzburg, Steiermark	hypo_oberosterreich_salzburg_steiermark
Hypo Tirol Bank AG	hypo_tirol_bank_ag
Hypo Vorarlberg Bank AG	hypo_vorarlberg_bank_ag
HYPO-BANK BURGENLAND Aktiengesellschaft	hypo_bank_burgenland_aktiengesellschaft
Marchfelder Bank	marchfelder_bank
Oberbank AG	oberbank_ag
Raiffeisen Bankengruppe Österreich	raiffeisen_bankengruppe_osterreich
Schoellerbank AG	schoellerbank_ag
Sparda-Bank Wien	sparda_bank_wien
Volksbank Gruppe	volksbank_gruppe
Volkskreditbank AG	volkskreditbank_ag
VR-Bank Braunau	vr_bank_braunau

注

EPS の支払いを受け付ける

オーストリアで一般的な支払い方法である EPS を受け付ける方法をご紹介します。

注意

注

Stripe を設定するサーバ側

PaymentIntent を作成するサーバ側