Histórico de mensagens sobre n em cartões

js
"use client"
import { useEffect, useState } from 'react';

const App = () => {
const [message, setMessage] = useState('Hello React!');

useEffect(() => {
const script = document.createElement('script');
script.type = 'module';
script.src = 'https://cdn.jsdelivr.net/gh/efipay/js-payment-token-efi/dist/payment-token-efi.min.js';
script.onload = runEfiJsCode;
document.head.appendChild(script);
}, []);

const runEfiJsCode = async () => {
try {
EfiJs.CreditCard
.debugger(false)
.setAccount('')
.setEnvironment('') // 'production' or 'sandbox'
.setCreditCardData({
brand: '',
number: '',
cvv: '',
expirationMonth: '05',
expirationYear: '2029',
reuse: false
})
.getPaymentToken()
.then(data => {
const payment_token = data.payment_token;
const card_mask = data.card_mask;

setMessage(Payment_token: ${payment_token} | Card_mask: ${card_mask})
console.log('payment_token', payment_token);
console.log('card_mask', card_mask);
})
.catch(err => {
console.log('Código: ', err.code);
console.log('Nome: ', err.error);
console.log('Mensagem: ', err.error_description);
});
} catch (error) {
console.log('Código: ', error.code);
console.log('Nome: ', error.error);
console.log('Mensagem: ', error.error_description);
}
};

return (

);
};

export default function Home() {
return (

);
}