コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
決済にとどまらない機能

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

EPS の支払いを受け付ける

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

注意

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

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

注

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

Stripe を設定する
サーバ側

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

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

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

PaymentIntent を作成する
サーバ側

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

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=eps

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

その後、クライアント側で 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/basil/stripe.js"></script>
</head>

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

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

epsBank Element を追加して設定する

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

checkout.html
HTML
CSS
No results
<form id="payment-form">
  <div class="form-row">
    <label for="accountholder-name">
      Name
    </label>
    <input id="accountholder-name" name="accountholder-name">
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="eps-bank-element">
      EPS Bank
    </label>
    <div id="eps-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button>Submit Payment</button>

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

上記のフォームが読み込まれたら、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_intentPaymentIntent の一意の識別子。
payment_intent_client_secretPaymentIntent オブジェクトの 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に移行します。

銀行の値

銀行名値
Ärzte- und Apothekerbankarzte_und_apotheker_bank
Austrian Anadi Bank AGaustrian_anadi_bank_ag
Bank Austriabank_austria
Bankhaus Carl Spängler & Co.AGbankhaus_carl_spangler
Bankhaus Schelhammer & Schattera AGbankhaus_schelhammer_und_schattera_ag
BAWAG P.S.K. AGbawag_psk_ag
BKS Bank AGbks_bank_ag
Brüll Kallmus Bank AGbrull_kallmus_bank_ag
BTV VIER LÄNDER BANKbtv_vier_lander_bank
Capital Bank Grawe Gruppe AGcapital_bank_grawe_gruppe_ag
Dolomitenbankdolomitenbank
Easybank AGeasybank_ag
Erste Bank und Sparkassenerste_bank_und_sparkassen
Hypo Alpe-Adria-Bank International AGhypo_alpeadriabank_international_ag
HYPO NOE LB für Niederösterreich u. Wienhypo_noe_lb_fur_niederosterreich_u_wien
HYPO Oberösterreich, Salzburg, Steiermarkhypo_oberosterreich_salzburg_steiermark
Hypo Tirol Bank AGhypo_tirol_bank_ag
Hypo Vorarlberg Bank AGhypo_vorarlberg_bank_ag
HYPO-BANK BURGENLAND Aktiengesellschafthypo_bank_burgenland_aktiengesellschaft
Marchfelder Bankmarchfelder_bank
Oberbank AGoberbank_ag
Raiffeisen Bankengruppe Österreichraiffeisen_bankengruppe_osterreich
Schoellerbank AGschoellerbank_ag
Sparda-Bank Wiensparda_bank_wien
Volksbank Gruppevolksbank_gruppe
Volkskreditbank AGvolkskreditbank_ag
VR-Bank Braunauvr_bank_braunau
このページはお役に立ちましたか。
はいいいえ