On this page, you can find additional configuration for adding Bancontact mobile to your Components integration.
Use our Component to redirect the shopper to the Bancontact app, depending on how they are accessing your site:
- For shoppers on desktop or laptop, the shopper is presented a QR code.
- For shoppers on mobile, the shopper is switched to the Bancontact app. If this fails, the shopper is presented a QR code as a fallback.
- For shoppers on tablet, the shopper is presented with both a QR code and a button to switch to the Bancontact app.
Before you begin
This page assumes you have already:
You must also enable additional API response fields:
- In your Customer Area, go to Developers > Additional data.
- Under 3D Secure, select the checkbox for 3DS2 Additional Fields.
API reference
You do not need to send additional fields for Bancontact mobile. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
Component configuration
Step 1: Create a DOM element
Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
<div id="bcmc_mobile-container"></div>
Step 2: Create an instance of the Component
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
.
const bcmcMobile = new (checkout).mount('#bcmc_mobile-container');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create the Component:
const bcmcMobileComponent = checkout.create('bcmc_mobile').mount('#bcmc_mobile-container');
Recurring
Bancontact recurring payments are not available in the test environment. To test your integration, do a penny test in the live environment instead.
We support recurring transactions for Bancontact through SEPA Direct Debit. To make recurring payments, you need to:
Create a token
We strongly recommend that you request explicit permission from the shopper if you intend to make recurring SEPA payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.
To create a token, include in your /sessions or /payments request:
storePaymentMethod
: true- shopperReference: Your unique identifier for the shopper (minimum length three characters).
When the payment has been settled, you receive a webhook containing:
eventCode
: RECURRING_CONTRACToriginalReference
: ThepspReference
of the initial payment.pspReference
: This is the token that you need to make recurring payments for this shopper.
Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.
Make a payment with a token
To make a payment with the token, include in your /payments request:
paymentMethod.storedPaymentMethodId
: ThepspReference
from the RECURRING_CONTRACT. You can also get this value by using the /listRecurringDetails endpoint.shopperReference
: The unique shopper identifier that you specified when creating the token.shopperInteraction
: ContAuth.recurringProcessingModel
: Subscription or UnscheduledCardOnFile.
For more information about the shopperInteraction
and recurringProcessingModel
fields, refer to Tokenization.
Test and go live
Bancontact does not have a test platform, but you can simulate authorized or declined payments.
To simulate authorized or declined payments, make a test payment using the following last three digits for the payment amount:
Amount ending in | Description | Result |
---|---|---|
000 | Simulates an approved transaction within fifteen seconds. | Authorised |
123 | Simulates a refused transaction within fifteen seconds. | Refused |
Any other scenarios must be tested in the live environment using real payment details and small amounts.
Before you can accept live payments, you need to submit a request for Bancontact in your live Customer Area.