iDEAL Module

Enable payments using iDEAL using the BR-DGE Redirect Payment Flow.

How iDEAL payments work with BR-DGE

  1. Your customer clicks the iDEAL button added to your checkout using the BR-DGE Web SDK iDEAL module.
  2. Merchants send a payment request to BR-DGE using paymentInstrument of type IDEAL
  3. BR-DGE responds with a redirect action response
  4. The WebSDK postAction module handles the redirect action that redirects to iDEAL for payment collection
  5. Depending on the outcome of the payment iDEAL 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 the iDEAL Module to your App

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

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

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

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

Finally add the iDEAL 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 iDEAL
  comcarde.ideal.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)
    },
  })
})