Bancontact Module

Enable payments using bancontact which uses the BR-DGE Redirect Payment Flow.

How Bancontact Payments Work With BR-DGE

1. Your customer clicks the bancontact button added to your checkout using the BR-DGE Web SDK Bancontact module.
2. Merchants send a payment request to BR-DGE using paymentInstrument of type bancontact
3. BR-DGE responds with a redirect action response
4. The WebSDK postAction module handles the redirect action that redirects to bancontact for payment collection
5. Depending on the outcome of the payment bancontact redirects back to the merchant success or error page.
6. Your client app confirms the outcome of the payment via your server
7. Your server confirms the outcome of the payment via BR-DGE

Add Bancontact Module to Your App

After you have set up the Comcarde JavaScript Client, you can add the bancontact module to your website source.

<script src="https://sandbox-assets.comcarde.com/web/v2/js/bancontact.min.js"></script>

<script src="https://assets.comcarde.com/web/v2/js/bancontact.min.js"></script>

Next insert a placeholder element to your page with the id of bridge-bancontact-button so the bancontact module can populate it with an bancontact button:

<div id="bridge-bancontact-button"></div>

Finally add the bancontact configuration to the Comcarde JavaScript Client

const authorization = clientApiKey // your client API Key
comcarde.client.create({ authorization }, function (clientErr, clientInstance) {
  // optionally configure other plugin modules...

  // Initialise bancontact
  comcarde.bancontact.create({
    client: clientInstance,
    onClick: async () => {
      // Call your Merchant payment endpoint
      const response = await makePayment()
      // Use the postAction module to handle the redirect action
      postAction.handleAction(response.action)
    },
  })
})