Take iDEAL | Wero payments using the BR-DGE Redirect Payment Flow.

📘

iDeal | Wero is not available with all payment processors. If you're unsure if your payment processor supports iDeal | Wero then contact our support team for more information.

iDEAL | Wero Payments via BR-DGE

1. Customer Initiation

   Your customer selects the iDEAL | Wero payment method via the button rendered by the BR-DGE Web SDK module.

2. Payment Request

   Your server initiates a payment request to the BR-DGE API, specifying the paymentInstrument as type ideal and passing the required parameters.

   Example iDeal | Wero Payment Request

   {
    ...
     "paymentInstrument": {
       "type": "ideal",
       "successUrl": "https://example.com/success",
       "errorUrl": "https://example.com/error"
     },
    ...
   }

   See the POST /v1/payments API reference for a full overview of the input parameters.

3. BR-DGE Redirect Action

   The BR-DGE API returns a redirect action response. This response contains the necessary data to redirect the customer to the iDEAL | Wero hosted environment.

4. Action Handling

   The WebSDK Post Response Module automatically processes the redirect action, securely routing the customer to the iDEAL | Wero interface for authentication and authorization.

5. Bank Redirection

   Upon completion of the transaction, the customer is redirected back to your website with either the successUrl or failureUrl specified in your payment request (Step 2).

6. Outcome Verification

   1. Client-Side: Your application detects the return and queries your backend for the status.
   2. Server-Side: Your server validates the final transaction outcome by polling the BR-DGE API.

Add the iDEAL | Wero 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 configuration to the Comcarde 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)
    },
  })
})