Estoy usando @stripe/react-stripe-js y @stripe/stripe-js en mi proyecto para manejar pagos con tarjeta.
Configuré una API de webhook y una API de intención de pago. ¡Estos funcionan muy bien! El problema ocurre cuando llamo a stripe.confirmCardPayment()
Cuando intento enviar mi pago, recibo un error HTTP 400 del extremo de Stripe POST /v1/payment_intents/:id/confirm . ( https://api.stripe.com/v1/payment_intents/pi_abc/confirm )
Mi código se basa en el código de ejemplo de Stripe, consulte a continuación:
const handleSubmit = async event => { event.preventDefault(); if (!stripe || !elements) { // Stripe.js has not loaded yet. Make sure to disable form submission until Stripe.js has loaded. return; } const payload = await stripe.createPaymentMethod({ type: "card", card: elements.getElement(CardNumberElement) }); console.log("[PaymentMethod]", payload); const paymentIntentURI = 'https://api.mydomain.com/v1/create_payment_intent' const data = {items:'product_123'} const response = await fetch(paymentIntentURI,{ method: 'POST', mode: 'cors', cache: 'no-cache', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, redirect: 'follow', referrerPolicy: 'no-referrer', body: JSON.stringify(data) // body data type must match "Content-Type" header }); const responseJSON = await response.json(); const clientSecret = responseJSON?.clientSecret ?? ''; payWithCard({stripe, card:payload.paymentMethod.card, clientSecret}) }; const payWithCard = ({stripe, card, clientSecret}) => { //loading(true); stripe.confirmCardPayment(clientSecret, { payment_method: { card: card } }) .then(function(result) { if (result.error) { // Show error to your customer console.error(result.error.message) //<--- THIS LINE LOGS THE ERROR MESSAGE showError(result.error.message); } else { // The payment succeeded! orderComplete(result.paymentIntent.id); } }); };El registro muestra error:
Received unknown parameters: brand, country, funding, networks, three_d_secure_usagepaquete.json
"@stripe/react-stripe-js": "^1.4.1", "@stripe/stripe-js": "^1.16.0", Todo parece correcto en el tablero de Stripe hasta stripe.confirmCardPayment() .
POST /v1/payment_intents/:id/confirm rechaza algunos pares clave-valor en la carga útil.
¿Qué estoy haciendo mal? Saludos cordiales /K
NO debería haber obtenido la tarjeta del resultado de stripe.createPaymentMethod() ( payload.paymentMethod.card ); al hacerlo, parece que obtuve el objeto de tarjeta incorrecto.
¡Recuperar la tarjeta de elements.getElement(CardNumberElement) parece obtener el objeto de tarjeta correcto!
Esto realmente simplifica mucho el código: D
const payWithCard = () => { const card = elements.getElement(CardNumberElement) console.log('payWithCard', card) stripe.confirmCardPayment(clientSecret, { receipt_email: email, payment_method: { card: card, ...