Adyen Drop-in Web v6 Integration

import {
  AdyenCheckout,
  Dropin,
  Card,
  GooglePay,
  ApplePay,
  PayPal,
  Klarna,
} from '@adyen/adyen-web';

import '@adyen/adyen-web/styles/adyen.css';

import { useAdyenCreatePaymentSessionRequest } from '@broadleaf/adyen-payment-services-react';

  const {
    createPaymentSession,
    error: createPaymentSessionError,
  } = useAdyenCreatePaymentSessionRequest({
    adyenPaymentServicesClient,
    authState,
  });

const createSession = async () => {
  const amount = {
    amount: 900,
    currency: 'USD',
  };

  const request = {
    amount,
    reference: cart.id,
    returnUrl: '...',
    countryCode: cart.fulfillmentGroups[0]?.address?.country,
    //hardcode, backend will know what to do with that when customer logged in
    recurringProcessingModel: 'CardOnFile',
    storePaymentMethodMode: 'askForConsent',
    shopperEmail: customerEmail,
    lineItems: getLineItems(cart),
  };

  const session = await createPaymentSession(request);
  setSession(session);
};

const checkoutConfiguration = {
  environment: 'test',
  clientKey: AdyenConfig.CLIENT_KEY,
  analytics: {
    enabled: false,
  },
  session: {
    id: session.id,
    sessionData: session.sessionData,
  },
  onSubmit: (state: SubmitData, component: UIElement, actions: SubmitActions) => {
      // handle submit, see step 7
  },
  onPaymentCompleted,
  onPaymentFailed,
};

const paymentMethodsConfiguration = {
  card: {
    hasHolderName: true,
    holderNameRequired: true,
    billingAddressRequired: true,
  },
  googlepay: {
    amount: adyenAmountInMinorUnits,
    countryCode: countryCode,
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL' as google.payments.api.BillingAddressFormat,
    },
    onAuthorized: (paymentData, actions) => {
      // store payment data to use it later when submitting
      setPaymentData(paymentData);
      actions.resolve();
    },
  } as GooglePayConfiguration,
  applepay: {
    amount: adyenAmountInMinorUnits,
    requiredBillingContactFields: [
      'name',
      'postalAddress',
    ] as ApplePayJS.ApplePayContactField[],
    onAuthorized: (paymentData, actions) => {
      // store payment data to use it later when submitting
      setPaymentData(paymentData);
      // resolve to continue
      actions.resolve();
    },
  } as ApplePayConfiguration,
  paypal: {
    intent: 'authorize',
    amount: adyenAmountInMinorUnits,
    blockPayPalCreditButton: true,
    blockPayPalPayLaterButton: true,
    blockPayPalVenmoButton: true,
    // The buyer country is only used in the sandbox. Don't pass this query parameter in production.
    countryCode: countryCode,
    onAuthorized: async (paymentData, actions) => {
      const paymentUpdateRequest = {
        paymentId,
        billingAddress: mapBillingAddress(paymentData),
      } as UpdatePaymentRequest;

      try {
        // update payment with billing address
        const updatedPaymentSummary = await handleUpdatePaymentInfo(
          paymentUpdateRequest,
          paymentVersion
        );

        actions.resolve();
      } catch (err) {
        actions.reject();
      }
    },
  },
} as PaymentMethodsConfiguration;

useEffect(() => {
  if (!session || dropinComponent) {
    return;
  }

  const mountDropin = async () => {
    const checkout = await AdyenCheckout(checkoutConfiguration);

    const dropin = new Dropin(checkout, {
      paymentMethodComponents: [Card, GooglePay, ApplePay, PayPal, Klarna],
      paymentMethodsConfiguration,
      showStoredPaymentMethods: true,
      onSelect: (paymentMethod: UIElement) => {
        // Store the current selected payment type to get it when submitting
        const type = paymentMethod.type.toLowerCase();
        if (type === 'googlepay') {
            PaymentTypeHelper.setPaymentType('GOOGLE_PAY');
          } else if (type === 'applepay') {
            PaymentTypeHelper.setPaymentType('APPLE_PAY');
          } else if (type === 'paypal') {
            PaymentTypeHelper.setPaymentType('PAYPAL');
          } else if (type.includes('klarna')) {
            PaymentTypeHelper.setPaymentType('KLARNA');
          } else {
            // default to credit card
            PaymentTypeHelper.setPaymentType('CREDIT_CARD');
          }
      },
    });

    dropin.mount('#adyen-dropin-container');
    setDropinComponent(dropin);
  };

  mountDropin();
}, [session, dropinComponent]);

return <div id="adyen-dropin-container" />;

const handleSubmitAdyenPayment = async ({
  state,
  actions,
  sessionId,
  paymentData,
}) => {
  // store the actions for later use if needed
  setSubmitActions(actions);

  // get selected payment type
  const paymentType = PaymentTypeHelper.getPaymentType();

  const paymentRequest = {
    name: 'ADYEN',
    type: paymentType,
    gatewayType: 'ADYEN',
    amount,
    subtotal: cart.cartPricing.subtotal,
    adjustmentsTotal: cart.cartPricing.adjustmentsTotal,
    fulfillmentTotal: cart.cartPricing.fulfillmentTotal,
    taxTotal: cart.cartPricing.totalTax,
    isSingleUsePaymentMethod: true,
    shouldArchiveExistingPayments: true,
    paymentMethodProperties: {
      sessionId,
      returnUrl,
    },
    billingAddress,
  } as PaymentRequest;

  const paymentSummary = await handleSubmitPaymentInfo(paymentRequest);

  const lineItems = getLineItems(cart);

  const checkoutResponse = await submitCart({
    sensitivePaymentMethodData: [
      {
        paymentId: paymentSummary.paymentId,
        paymentMethodProperties: {
          ADYEN_PAYMENT_DATA: {
            ...state.data,
            shopperEmail: customerEmail,
            lineItems,
            countryCode: countryCode,
          },
        },
      },
    ],
  });

  if (checkoutResponse?.success) {
    // At this point, the payment is successful
    actions.resolve({
      resultCode: 'Authorised',
    });
  }

  return checkoutResponse?.paymentSummaries[0];
};

    const errorType = get(error, 'failureType');

    if (
      errorType === 'PAYMENT_REQUIRES_3DS_VERIFICATION' ||
      errorType === 'PAYMENT_REQUIRES_EXTERNAL_INTERACTION' ||
      errorType === 'PAYMENT_REQUIRES_HOSTED_PAYMENT_PAGE_INTERACTION'
    ) {
      const errorDetails = find(
        get(error, 'paymentTransactionFailureDetails'),
        ({ failureType }) =>
          failureType === 'REQUIRES_3DS_VERIFICATION' ||
          failureType === 'REQUIRES_EXTERNAL_INTERACTION' ||
          failureType === 'REQUIRES_HOSTED_PAYMENT_PAGE_INTERACTION'
      );

      // get result code
      const resultCode = get(errorDetails, 'nextAction.attributes.resultCode');
      const action = omit(
        get(errorDetails, 'nextAction.attributes'),
        'resultCode'
      );

      if (!resultCode) {
        submitActions.reject();
      } else {
        //
        submitActions.resolve({
          resultCode,
          action,
        });
      }
    } else if (error) {
      submitActions.reject();
    }

const onPaymentCompleted = async (data: PaymentCompletedData, component?: UIElement) => {
  //Redirect to success page or refresh checkout state
};

const onPaymentFailed = async (data?: PaymentFailedData, component?: UIElement) => {
  // handle failed payment.
};

import { useAdyenPaymentServicesClient } from '@app/common/contexts';
import {
  useAdyenListSavedPaymentMethods,
  useAdyenDeleteSavedPaymentMethod,
} from '@broadleaf/adyen-payment-services-react';

...

  const authState = usePaymentAuthState();
  const adyenPaymentServicesClient = useAdyenPaymentServicesClient();

// list the saved payment methods
  const { adyenSavedPaymentMethods, listSavedPaymentMethods } =
    useAdyenListSavedPaymentMethods({
      adyenPaymentServicesClient,
      authState,
    });

// delete the saved payment method
  const { adyenDeleteSavedPaymentMethod } = useAdyenDeleteSavedPaymentMethod({
    adyenPaymentServicesClient,
    authState,
  });