mountPaymentElement

Method mounting an Adyen drop-in in the specified DOM element. Then the component is able to handle the payment Afterwards it will be able to trigger one after the other the payment/ call and the paymentDetails/ call if necessary https://docs.adyen.com/api-explorer/Checkout/71/post/payments https://docs.adyen.com/api-explorer/Checkout/71/post/payments/details

The method takes a session created by the createSession method, creates an AdyenCheckout instance using it. Then it mounts the drop-in component in specified DOM element.

Signature

export declare function mountPaymentElement(
	props: MountPaymentElementProperties
): Promise<MountPaymentElementResult>;

Parameters

Name	Required	Type	Description
`props`	Required	`MountPaymentElementProperties`	Parameter object which can be used with this method. Refer to its type definition to learn about possible properties.

Returns

Returns an instance of Core class, also known as Checkout or AdyenCheckout, and Drop-in component.

Referenced Types

Examples

Obtaining a session and mounting a drop-in component.

import { sdk } from '~/sdk.config.ts';

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {},
  dropinConfiguration {},
});

Additional configuration for the AdyenCheckout call can be passed via the adyenConfiguration property. You can read more about available properties here.

import { sdk } from '~/sdk.config.ts';

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {
     async onAdditionalDetails(state: any, component: any) {
        // get order here with state and build the below URL
        return {
          state,
          component,
          redirectUrl: `${window.location.origin}/checkout/thank-you?order=`, // - we will attach the order ID to the end of the provided URL
        };
     },
     onOrderFail(result: any, component: any) { // - This is used to handle order failure when the cart needs to be restored - such as after a wrong cvc entry
        // Fail the order and show specific error if needed
        console.log('WE GOT AN ERROR', result);
     },
  },
  dropinConfiguration {},
});

Additional Drop-in configuration can be passed via the dropinConfiguration property. You can read more about available properties here.

import { sdk } from '~/sdk.config.ts';

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {},
  dropinConfiguration: {
     paymentMethodsConfiguration: {
       card: {
         hasHolderName: true,
         holderNameRequired: true,
         billingAddressRequired: true,
       },
     },
     async onSubmit(result: any, component: any) {
        place the order - we need this as the last moment to pass the order number as payment reference is during the payments call which happens ad the end of this events flow
        return {
            shopperReference: the customer number (optional) - this is needed for saving cards for future payments
            reference: order.data?.id,
            successUrl: the url for successful payment,
            errorUrl: the error url - usually the checkout page,
            amount: {
              value: order.data?.totalPrice.amount,
              currency: order.data?.totalPrice.currency,
            },
            ...result.data,
        };
    },
  }
});