コンテンツにスキップ
アカウントを作成またはサインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
対面決済
決済手段
決済シナリオ
決済以外の機能

注

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

Bancontact による支払いの受け付け

ベルギーで一般的な支払い方法である Bancontact を受け付ける方法をご紹介します。

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

注

Bancontact のご利用にあたっては、Bancontact 利用規約に従う必要があります。

Stripe を設定する
サーバー側

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

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

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

PaymentIntent を作成する
サーバー側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトで、決済プロセスのライフサイクルの各段階を追跡します。

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
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[]"=bancontact

Bancontact オーソリページのデフォルト言語は英語 (en) に設定されています。preferred_language を fr、nl、または de に設定し、顧客の希望言語に合わせることもできます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
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[]"=bancontact \
  -d "payment_method_options[bancontact][preferred_language]"=fr

client secret を取得する

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

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

main.rb
Ruby
Python
PHP
Java
Node.js
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
})();

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

クライアントで決済フォームを作成し、必要な請求先情報を顧客から収集します。

フィールド値
name顧客の氏名。
checkout.html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

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

  <button id="submit-button">Pay with Bancontact</button>
</form>

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

PaymentIntent の client secret を使用し、クライアント側で支払いを作成します。client secret は、 Stripe API リクエストを認証する API キーとは異なります。client secret は支払いを完了できるため、慎重に取り扱う必要があります。ログに記録したり、URL に埋め込んだり、当該の顧客以外に公開したりしないでください。

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

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

stripe.confirmBancontactPayment を呼び出し、顧客を Bancontact のウェブサイトまたはアプリにリダイレクトして支払いを完了します。支払い完了後に顧客をリダイレクトする return_url を含めてください。また、顧客の氏名を billing_details に指定する必要もあります。

client.js
var stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Redirects away from the client
const {error} = await stripe.confirmBancontactPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        name: "Jenny Rosen"
      }
    },
    return_url: 'https://example.com/checkout/complete',
  }
);

if (error) {
  // Inform the customer that there was an error.
}

リダイレクトを処理する

Stripe が顧客を return_url にリダイレクトする際に、以下の URL クエリパラメータが提供されます。

パラメータ説明
payment_intentPaymentIntent の一意の識別子。
payment_intent_client_secretPaymentIntent オブジェクトの client secret。

return_url を指定する際に、独自のクエリパラメータを追加することもできます。このクエリパラメータは、リダイレクトプロセスの始めから終わりまで存続します。return_url は、支払いのステータスを提供する Web サイトのページと一致している必要があります。戻りページをレンダリングするときに、PaymentIntent のステータスを確認してください。確認するには、Stripe.js の retrievePaymentIntent 関数を使用し、payment_intent_client_secret を渡します。

(async () => {
  const url = new URL(window.location);
  const clientSecret = url.searchParams.get('payment_intent_client_secret');

  const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret);
  if (error) {
    // Handle error
  } else if (paymentIntent && paymentIntent.status === 'succeeded') {
    // Handle successful payment
  }
})();

銀行口座の詳細

顧客が支払いの実行に使用した銀行口座の詳細は、結果として生じた支払いの payment_method_details (支払い方法詳細) で確認できます。

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "bancontact": {
            "bank_code": "VAPE",
            "bank_name": "VAN DE PUT & CO",
            "bics": "VAPEBE22",
            "iban_last4": "7061",
            "preferred_language": "en",
            "verified_name": "Jenny Rosen"
          },
          "type": "bancontact"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",

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

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

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

  • ダッシュボードでイベントを手動で処理する

    ダッシュボードを使用して、テスト決済をダッシュボードで表示したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

  • Custom Webhook を構築する

    Custom Webhook ハンドラを構築してイベントをリッスンし、カスタム非同期型の決済フローを作成します。Stripe CLI を使用して、ローカルで Webhook の導入のテストとデバッグを行います。

  • 構築済みアプリを導入する

    パートナーアプリケーションを統合することで、自動化やマーケティング/セールスなどの一般的なビジネスイベントを処理します。

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

クライアント側で confirmBancontactPayment を使用して Bancontact のリダイレクトおよび支払いを処理するには、Stripe.js を使用することをお勧めします。Stripe.js を使用すると、他の決済手段にも対応するように実装を拡張できます。ただし、以下の手順に従って、お客様のサーバーに顧客を手動でリダイレクトすることもできます。

  1. タイプが bancontact の PaymentIntent を作成し、確定します。顧客から収集する必要がある payment_method_data.billing_details.name プロパティを提供する必要があります。payment_method_data を指定すると、PaymentMethod が作成され、この PaymentIntent でただちに使用されることに注意してください。

    また、顧客が支払いを完了した後にリダイレクトされる先の URL を return_url フィールドに指定する必要があります。オプションで、独自のクエリパラメータをこの URL に指定することもできます。これらのパラメータは、リダイレクトフロー完了時の最終的な URL に含められます。

Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


payment_intent = Stripe::PaymentIntent.create({
  confirm: true,
  amount: 1099,
  currency: 'eur',
  payment_method_types: ['bancontact'],
  payment_method_data: {
    type: 'bancontact',
    billing_details: {
      name: 'Jenny Rosen',
    },
  },
  return_url: 'https://example.com/checkout/complete',
})
  1. PaymentIntent のステータスが requires_action であることと、next_action のタイプが redirect_to_url であることを確認します。
Response
{
  "status": "requires_action",
  "next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
  "object": "payment_intent",
  ...
}
  1. next_action.redirect_to_url.url プロパティで指定された URL に顧客をリダイレクトします。ここでのコード例はおおまかなものであり、リダイレクト方法は、お客様のウェブフレームワークによって異なることがあります。
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
if payment_intent.status == 'requires_action' && payment_intent.next_action.type == 'redirect_to_url'
  url = payment_intent.next_action.redirect_to_url.url
  redirect(url)
end

支払いプロセスが完了すると、顧客は return_url にリダイレクトされます。payment_intent および payment_intent_client_secret URL クエリパラメーターは、お客様独自のクエリパラメーターと併せて含まれています。支払いのステータスをプログラムで確認するために、Webhook エンドポイントを設定することをお勧めします。

このページはお役に立ちましたか。
はいいいえ