Adyen Checkout hook

Home   »   Adyen Checkout hook

import { useState } from "react";
import { useMount } from "react-use";
import { ADYEN_CLIENT_KEY, ADYEN_ENVIRONMENT } from "config";

let AdyenCheckout = require("@adyen/adyen-web");

const useAdyenCheckout = ({ containerElementId, onChange }) => {
  const [isCardNumberFocused, setCardNumberFocused] = useState(false);
  const [isExpiryDateFocused, setExpiryDateFocused] = useState(false);
  const [isSecurityCodeFocused, setSecurityCodeFocused] = useState(false);

  const [cardNumberError, setCardNumberError] = useState();
  const [expiryDateError, setExpiryDateError] = useState();
  const [securityCodeError, setSecurityCodeError] = useState();

  const fieldFocusStates = {
    encryptedCardNumber: setCardNumberFocused,
    encryptedExpiryDate: setExpiryDateFocused,
    encryptedSecurityCode: setSecurityCodeFocused,
  };

  const fieldErrorStates = {
    encryptedCardNumber: setCardNumberError,
    encryptedExpiryDate: setExpiryDateError,
    encryptedSecurityCode: setSecurityCodeError,
  };

  useMount(() => {
    let bin;

    const adyenCheckout = new AdyenCheckout({
      locale: "en_US",
      environment: ADYEN_ENVIRONMENT,
      clientKey: ADYEN_CLIENT_KEY,
    });

    adyenCheckout
      .create("securedfields", {
        type: "card",
        brands: ["mc", "visa"],
        styles: {
          base: {
            fontFamily: "sans-serif",
            fontWeight: 300,
            fontSize: "18px",
            color: "#323232",
          },
          error: {
            color: "#323232",
          },
        },
        ariaLabels: {
          lang: "en-GB",
          encryptedCardNumber: {
            label: "Card Number",
            iframeTitle: "Iframe for card number input field",
          },
          encryptedExpiryDate: {
            label: "Card Expiry Date",
            iframeTitle: "Iframe for card expiry month input field",
          },
          encryptedSecurityCode: {
            label: "Card security code",
            iframeTitle: "Iframe for card security code field",
          },
        },
        onChange: (event) => {
          if (event.isValid) {
            onChange({ ...event.data.paymentMethod, bin });
          } else {
            onChange(null);
          }
        },
        onFieldValid: (event) => {
          // eslint-disable-next-line no-unused-expressions
          fieldErrorStates[event.fieldType]?.(null);
        },
        onError: (event) => {
          const message = event.errorI18n;
          const error = message ? { message } : null;
          // eslint-disable-next-line no-unused-expressions
          fieldErrorStates[event.fieldType]?.(error);
        },
        onFocus: (event) => {
          // eslint-disable-next-line no-unused-expressions
          fieldFocusStates[event.fieldType]?.(event.focus);
        },
        onBinValue: (event) => {
          bin = event.binValue;
        },
      })
      .mount(`#${containerElementId}`);
  });

  return {
    isCardNumberFocused,
    isExpiryDateFocused,
    isSecurityCodeFocused,
    cardNumberError,
    expiryDateError,
    securityCodeError,
  };
};

export default useAdyenCheckout;

Leave a Reply

Your email address will not be published. Required fields are marked *