This page explains how to add Bancontact mobile to your existing Web 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.
Requirements
Requirement | Description |
---|---|
Integration type | Make sure that you have an existing Web Components integration. |
Setup steps | Before you begin:
|
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 AdyenChec