CODEWITHSUNDEEP
javascriptreactjsstripe-payments
Kermit
Kermit

Reputation: 3407

Stripe /v1/payment_intents/:id/confirm returns HTTP 400 “Received unknown parameters” (Stripe Elements and React)

I am using @stripe/react-stripe-js and @stripe/stripe-js in my project to handle card payments.

I have set up a webhook API and a payment intent API. These works great! The problem occurs when I call stripe.confirmCardPayment()

When I try to submit my payment I get a HTTP 400 error from the Stripe endpoint POST /v1/payment_intents/:id/confirm. (https://api.stripe.com/v1/payment_intents/pi_abc/confirm)

My code is based on Stripe example code, see below:

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);
      }
    });
  };

The log shows error:

Received unknown parameters: brand, country, funding, networks, three_d_secure_usage

package.json

"@stripe/react-stripe-js": "^1.4.1",
"@stripe/stripe-js": "^1.16.0",

Everything seems correct in the Stripe dashboard up to stripe.confirmCardPayment().

POST /v1/payment_intents/:id/confirm rejects some key-value pairs in the payload.

What am I doing wrong? Kind regards /K

Upvotes: 3

Views: 1537

Answers (1)

Kermit
Kermit

Reputation: 3407

I should NOT have fetched the card from the result of stripe.createPaymentMethod() (payload.paymentMethod.card) - by doing so I seem to have got hold the wrong card Object.

Fetching the card from elements.getElement(CardNumberElement) seems to fetch the correct card Object!

This actually simplifies the code a great deal :D

const payWithCard = () => {
    const card = elements.getElement(CardNumberElement)
    console.log('payWithCard', card)
    stripe.confirmCardPayment(clientSecret, {
      receipt_email: email,
      payment_method: {
        card: card,
        ...

Upvotes: 1

Related Questions