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 https://api.stripe.com/v1/customers \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -X "POST"

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_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "setup_future_usage"="off_session"

The PaymentIntent includes the payment method ID and a client secret, which is used on the client side to securely complete the payment process instead of passing the entire PaymentIntent object.

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

var response = fetch('/secret').then(function(response) {
  return response.json();
}).then(function(responseJson) {
  var clientSecret = responseJson.client_secret;
  // Call stripe.confirmBancontactPayment() with the client secret.
});

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
stripe.confirmBancontactPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        name: accountholderName.value,
        email: accountholderEmail.value,
      },
    },
    return_url: 'https://your-website.com/checkout/complete',
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

The return_url should correspond to a page on your website that provides the status of the payment, by verifying the status of the PaymentIntent when rendering the return page. When Stripe redirects the customer to the return_url, the following URL query parameters are provided to verify the status. You may also append your own query parameters to the return_url. They persist throughout the redirect process.

When you need to charge your customer again, create a new PaymentIntent. Find the ID of the SEPA Direct Debit payment method by listing the payment methods associated with your customer.

curl https://api.stripe.com/v1/payment_methods \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "type"="sepa_debit"

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

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -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"

You can find additional information about the payment under payment_method_details.

{
  "charges": {
    "data": [
      {
        "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"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",