mercadopago-react-sdk/src/hooks/useCard.js

Mercado Pago - React SDK

import { useEffect, useState } from "react";

const useCard = (mercadopago_public_key) => {
  const [card, setCard] = useState({
    expiration: "",
    cardExpirationMonth: "",
    cardExpirationYear: "",
    securityCode: "",
    cardholderName: "",
    identificationNumber: "",
    cardholderEmail: "",
  });

  const [cardNumber, setCardNumber] = useState("");
  const [cardExpirationMonth, setCardExpirationMonth] = useState("");
  const [cardExpirationYear, setCardExpirationYear] = useState("");
  const [securityCode, setSecurityCode] = useState("");

  const [cardName, setCardName] = useState("");

  const { cardholderName, identificationNumber, cardholderEmail } = card;

  const handleInputChange = ({ target }) =>
    setCard({ ...card, [target.name]: target.value });

  const onlyNumberKey = (event) => {
    return isNaN(+event.key) === true ? null : true;
  };

  const onlyTextKey = (event) => {
    return isNaN(+event.key) ? true : false;
  };

  useEffect(() => {
    const scriptElement = window.document.createElement("script");
    scriptElement.setAttribute("src", "https://sdk.mercadopago.com/js/v2");

    scriptElement.onload = () => {
      // eslint-disable-next-line
      const mercadopago = new MercadoPago(mercadopago_public_key);

      const cardForm = mercadopago.cardForm({
        amount: "80",
        autoMount: true,
        form: {
          id: "form-checkout",
          cardholderName: {
            id: "form-checkout__cardholderName",
          },
          cardholderEmail: {
            id: "form-checkout__cardholderEmail",
          },
          cardNumber: {
            id: "form-checkout__cardNumber",
          },
          cardExpirationMonth: {
            id: "form-checkout__cardExpirationMonth",
            placeholder: `${
              new Date().getMonth() + 1 < 10
                ? "0" + (new Date().getMonth() + 1)
                : new Date().getMonth() + 1
            }`,
          },
          cardExpirationYear: {
            id: "form-checkout__cardExpirationYear",
            placeholder: `${new Date().getFullYear().toString().slice(2)}`,
          },
          securityCode: {
            id: "form-checkout__securityCode",
            placeholder: "123",
          },
          installments: {
            id: "form-checkout__installments",
          },
          identificationType: {
            id: "form-checkout__identificationType",
          },
          identificationNumber: {
            id: "form-checkout__identificationNumber",
          },
          issuer: {
            id: "form-checkout__issuer",
          },
        },
        callbacks: {
          onFormMounted: (error) => {
            if (error) return;
          },
          onFormUnmounted: (error) => {
            if (error) return;
          },
          onIdentificationTypesReceived: (error) => {
            if (error) return;
          },
          onPaymentMethodsReceived: (error, paymentMethods) => {
            if (error) return;

            setCardName(paymentMethods[0].name);
          },
          onIssuersReceived: (error) => {
            if (error) return;
          },
          onInstallmentsReceived: (error, installments) => {
            if (error) return;
          },
          onCardTokenReceived: (error, token) => {
            if (error) return;
            console.log("Token available: ", token);
          },
          onSubmit: (event) => {
            event.preventDefault();
            const cardData = cardForm.getCardFormData();
            console.log("CardForm data available: ", cardData);
          },
          onFetching: (resource) => {
            console.log("Fetching resource: ", resource);
          },
          onError: (error, event) => {
            console.log(event, error);
          },
          onValidityChange: (error, field) => {
            console.log(field);
            if (error)
              return error.forEach((e) =>
                console.log(`${field}: ${e.message}`)
              );
            console.log(`${field} is valid`);
          },
          onReady: () => {},
        },
      });
    };

    window.document.body.appendChild(scriptElement);

    // eslint-disable-next-line
  }, []);

  return {
    cardNumber,
    setCardNumber,
    cardExpirationMonth,
    setCardExpirationMonth,
    cardExpirationYear,
    setCardExpirationYear,
    securityCode,
    setSecurityCode,
    cardName,
    cardholderName,
    identificationNumber,
    cardholderEmail,
    handleInputChange,
    onlyNumberKey,
    onlyTextKey,
  };
};

export default useCard;