This article focuses on transactions for authentication purposes (zero-amount) with online bank payment methods.

By online bank payment methods we mean iDEAL, as opposed to standard payment methods, like card, Apple Pay or Google Pay.

Overview

Adyen supports online bank payment methods, like iDEAL. By default, these payment methods don’t support zero-amount transactions for authentication, which is required in case of:

• free trial,
• 100% coupon code,
• add/update payment details feature.

That means that when you integrate a Drop-in - a user interface element - and try to present payment methods for an offer in the free trial, these payment methods will never appear as an option for a customer. This is a default behavior for Drop-in integration.

Cleeng offers support for these payment methods authentication by charging a customer a temporary charge of 0.10 EUR during the initial payment. The amount is refunded once the transaction is completed.

📘

Important

Make sure you subscribe to the refundPayment webhook, otherwise refunds will not work.

Follow the steps below to support authentication for online bank payment methods.

Paid offers

For paid offers, you can keep the default Drop-in integration (one Drop-in), or use the same integration as for free offers (two Drop-ins). What’s the difference?

• If you have one Drop-in (you create one payment session), Adyen will automatically put recommended/most popular payment methods at the top (e.g. iDeal in the Netherlands).
• If you have two Drop-ins (you create two payment sessions), then the order will be different: from the most popular standard payment methods that support zero-amount transactions (card, Apple Pay, Google Pay), through the most popular online bank payment methods (in such case iDeal will be in the middle of the list for customers from the Netherlands).

Free offers

For free offers, you will need to create two payment sessions, and as a consequence two Drop-ins:

1. Create a payment session with filterPaymentMethodsByType: zeroPaymentSupported param. This Drop-in will present payment methods that support zero-amount transactions.
2. Create payment sessions with filterPaymentMethodsByType: zeroPaymentNotSupported param. This Drop-in will present only payment methods that need to charge the customer and then make a refund.
3. Embed both Drop-ins. We recommend embedding standard payment methods at the top, and online bank payment methods below.
4. Double-check if the order is properly updated with the proper payment method ID.
5. Add onClick event listeners to both Drop-ins. As a function call closeActivePaymentMethod, e.g.:

standardPaymentMethodsRef.current.addEventListener('click', () => {
      bankDropInInstance.closeActivePaymentMethod();
});

As a bankDropInInstance we understand here Drop-in for online bank payment methods.

6. Adjust logic for the case when the customer applied a coupon (remount Drop-ins).
7. Adjust the styling of Drop-ins to make them look like one list.
8. Recommended: Insert an additional text to online bank payment methods to inform customers about the charge and refund. To do so, you can use the onReady callback and function similar to the one below:

const addAdditionalCopyForBankPaymentMethods = methodName => {
   const newEl = document.createElement('p');
   newEl.textContent +=
     'You accept the terms and conditions of this agreement and that your account will be charged €0.10 for authentication purposes. This amount will be refunded once the transaction is completed. And your account will be debited on a recurring basis for the full subscription amount.';

   newEl.classList.add('adyen__bank-copy');

   const parentEl = document.querySelector(
     `.adyen-checkout__payment-method--${methodName}`
   );
   if (parentEl) {
     const details = parentEl.querySelector(
       '.adyen-checkout__payment-method__details'
     );
     parentEl.insertBefore(newEl, details);
   }
 };

 const showAdditionalText = () => {
   if (totalPrice === 0) {
     const bankPaymentMethods = ['ideal', 'directEbanking']; // payment methods name in Adyen
     bankPaymentMethods.forEach(method =>
       addAdditionalCopyForBankPaymentMethods(method)
     );
   }
 };

const dropin = adyenCheckout.create('dropin', {
       onSelect,
       onReady: showAdditionalText,
       openFirstPaymentMethod: false
     });

📘

It is also recommended to implement an additional checkbox to get customer’s direct consent.

Here is how the result may look:

🚧

Please note that refunds that are triggered for transactions made for authentication purposes (zero-amount) or subscription switches (upgrades or downgrades) may take up to two days.