Save bank details during a Bancontact payment

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Create a Customer when they create an account with your business and associate it with your internal representation of their account. This enables you to retrieve and use their saved payment method details later.

curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

Create a PaymentIntent on your server and specify the amount to collect, the eur currency, the customer ID, and off_session as an argument for setup future usage. If you have an existing Payment Intents integration, add bancontact to the list of payment method types.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=bancontact \
  -d customer={{CUSTOMER_ID}} \
  -d setup_future_usage=off_session

Retrieve the client secret

The PaymentIntent includes a client secret that the client side uses to securely complete the payment process. You can use different approaches to pass the client secret to the client side.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Create a payment form on your client to collect the required billing details from the customer.

<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <div class="form-row">
    <label for="email">
      Email
    </label>
    <input id="email" name="email" required>
  </div>

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

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider, to
    send instructions to your bank to debit your account and (B) your bank to
    debit your account in accordance with those instructions. As part of your
    rights, you are entitled to a refund from your bank under the terms and
    conditions of your agreement with your bank. A refund must be claimed
    within 8 weeks starting from the date on which your account was debited.
    Your rights are explained in a statement that you can obtain from your
    bank. You agree to receive notifications for future debits up to 2 days
    before they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

Create a payment on the client side with the client secret of the PaymentIntent. The client secret is different from your API keys that authenticate Stripe API requests. It should be handled carefully because it can complete the charge. Do not log it, embed it in URLs, or expose it to anyone but the customer.

var stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
var accountholderName = document.getElementById('name');
var accountholderEmail = document.getElementById('email');

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

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

When your customer submits a payment, Stripe redirects them to the return_url and includes the following URL query parameters. The return page can use them to get the status of the PaymentIntent so it can display the payment status to the customer.

When you specify the return_url, you can also append your own query parameters for use on the return page.

When the customer is redirected back to your site, you can use the payment_intent_client_secret to query for the PaymentIntent and display the transaction status to your customer.

When you need to charge your customer again, create a new PaymentIntent. Find the ID of the SEPA Direct Debit payment method by retrieving the previous PaymentIntent and expanding the latest_charge field where you will find the generated_sepa_debit ID inside of payment_method_details.

curl -G https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_charge

The SEPA Direct Debit payment method ID is the generated_sepa_debit ID under payment_method_details in the response.

{
  "latest_charge": {
    "payment_method_details": {
      "bancontact": {
        "bank_code": "VAPE",
        "bank_name": "VAN DE PUT & CO",
        "bics": "VAPEBE22",
        "iban_last4": "7061",
        "generated_sepa_debit": "pm_1GrddXGf98efjktuBIi3ag7aJQ",
        "preferred_language": "en",
        "verified_name": "Jenny Rosen"
      },
      "type": "bancontact"
    },
  },
  "payment_method_options": {
    "bancontact": {}

Create a PaymentIntent with the SEPA Direct Debit and Customer IDs.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true