Handle payment method

Integration

The FormWithRedirectPaymentMethodManager is an SDK manager designed to streamline the headless integrations of various payment methods that are comprised of an initial component/form and a redirect flow.

To integrate FormWithRedirectPaymentMethodManager, follow these steps:

1. 1

   The PrimerHeadlessCheckout will help you configure the headless payment method and then start the payment process

2. 2

   When calling configure, provide a callback function for onAvailablePaymentMethodsLoad as described here

3. 3

   For the Adyen iDEAL payment method, configure a handler for the FORM_WITH_REDIRECT payment method manager type and create a payment method manager as described here

4. 4

   When the configuration for the payment method has been retrieved, onConfigurationLoad callback will be called with a payload that will have a format as seen here

5. 5

   For Adyen iDEAL the data received on the configuration are the bankIssuers. You can use this list to create the custom component/form

6. 6

   When the user has selected a bankIssuer you can start the payment process by calling the submit function provided by the payment method manager created at step 3.

Create the PrimerHeadlessCheckout in order to interact with the Primer API

You can follow the steps described here in order to configure the PrimerHeadlessCheckout.

Provide a custom handler for the FORM_WITH_REDIRECT payment method manager

As described here the onAvailablePaymentMethodsLoad callback will be called with all available payment methods. Use this function and create a custom configuration for FORM_WITH_REDIRECT payment method manager type and afterwards start the payment process.

123456789101112131415161718192021

await headless.configure({        onAvailablePaymentMethodsLoad(paymentMethods) {            // Called when the available payment methods are retrieved
            for (const paymentMethod of paymentMethods) {                // `type` is a unique ID representing the payment method                const { type, managerType } = paymentMethod                if(managerType === 'FORM_WITH_REDIRECT'){                    configureFormWithRedirectPaymentMethodManager()                }            }        },        onCheckoutComplete({ payment }) {            console.log('onCheckoutComplete', payment)        },        onCheckoutFail(error, { payment }, handler) {            return handler.showErrorMessage()        },    })        await headless.start();

Create the FormWithRedirectPaymentMethodManager

Call the start function in order to start the flow of the component:

123456789101112131415

function configureFormWithRedirectPaymentMethodManager(){    paymentMethodManager = await headless.createPaymentMethodManager(        paymentMethod,        {        onConfigurationLoad: ({ bankIssuers, error }) =>{            if (error) {                console.log("The configuration could not be retrieved")                return;            }
            renderCustomComponent(bankIssuers)        },        },    );  }

The onConfigurationLoad callback provides a payload as described here. The data received in the array can be used to configure a custom component/form.

Handle data collection

As mentioned previously, the component allows you to collect the payment options (bankIssuer), and to request payment finalization by calling the submit function from the payment method manager. You can use the result of the submit function to handle any errors.

12345678910

async function onOptionSelected( option: BankIssuer ) {    const result  = await paymentMethodManager.submit(option);
    if (!result.valid) {        console.log("Something went wrong.", result.validationErrors)        return;    }
    console.log("The payment finalized")}