debes usar el metodo que te provee la libreria @stripe/stripe-js llamado loadStripe:
const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);
por lo general se recomienda que la public key que te provee stripe la uses en el frontend desde una variable de entorno.
Luego de ello debes usar el comoponente que viene desde @stripe/react-stripe-js y pasarle como propiedad la constante que alamcenó la ejecucion de loadStripe.
luego de allí debes encerrar tu formulario de compra dentro del componente asi:
<Elements stripe={stripePromise}>
<Form/>
</Eelements>
luego dentro del componente utilizas el hook useStripe y useElements que viene desde @stripe/react-stripe-js y los inicializas dentro de tu componente como cualquier otro hook de react asi:
const Form = () =>{
const elements = useElement()
const stripe = useStripe()
}
luego desde el metodo que ejecutas para procesar la compra utilizas el metodo que viene dentro de la variable stripe que creaste en el paso anterior y deberia quedarte algo asi:
const handleSubmit = async ()=>{
try{
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardNumberElement),
});
}catch(error){
console.log(error)
}
}
es importante que uses los componentes que te provee stripe para capturar el numero de tarjeta, en este caso usas para obtener el número de la tarjeta del usuario. Este componente lo poner en tu JSX. puedes leer la documentacion aqui: stripe
por ultimo en el fronted lo que debes hacer es validar que no exista un error en la respuesta de createPaymentMethod y si no la hay recoges la respuesta en paymentMethod y la mandas mediante axios o fetch al backend. En esa respuesta paymentMethod hay mucha informacion que te puede ser util como el id de la compra.
Luego pasas al Backend y y allí debes hacer uso de stripe primero instalandolo:
pnpm i stripe
npm i stripe
Te creas un archivo de configuración e intancias estripe asi:
const stripe = new Stripe(env.STRIPE_KEY, { apiVersion: '2022-11-15' });
el primer parámetro es la secret key de tu cuenta en stripe y el segundo parámetro es un objeto que le dice a stripe con que api debe procesar la data. La última version al día de hoy es la de '2022-11-15'
luego de hacer esto debes ir al servicio que crees para procesar los pagos y hacer eso de la variable que creaste anteriormente instanciando stripe. Un ejemplo puede ser este:
const { status: state, id: idPayment } = await stripe.paymentIntents.create({
currency: 'USD',
payment_method: id,
amount
});
En este caso el id es el mismo que te devuelve la consulta a stripe en el frontend. Revisa el objeto Payment_method y ahi lo encontraras.
como extra:
Si lo dejas así como te lo propongo y no tienes problemas con el amount en cuanto al formato que te pide stripe vas a encontrar en el dashboard de stripe la venta con un status "sin fianlizar" debido a que el enfoque que te propongo es para que luego de que hagas el "paymentIntents" y proceses tu base de datos exitosamente confirmes la orden asi:
const { status } = await stripe.paymentIntents.confirm(idPayment);
el idPayment es lo que te vuelve el paymentIntents si todo fue OK. lo usas para confirmar la orden posterior a hacer otros procesos que tu lógica de negocio necesite antes de confirmar la orden.
Si quieres confirmar la orden directamente en el paymentIntents debes pasarle otro campo de configuración al segundo parámetro te quedaría algo así:
const { status: state, id: idPayment } = await stripe.paymentIntents.create({
currency: 'USD',
payment_method: id,
amount
confirm: true
});
Eso es todo. Cheers!