Gerald-RN-error | Stripe Developers | Page 1

dapper jettyBOT Oct 25, 2022, 2:13 PM

#

bright ice Oct 25, 2022, 2:14 PM

#

Hello 👋
What app are you referencing here?

copper spire Oct 25, 2022, 2:14 PM

#

hello im using react native

#

on the backend I have this

  const paymentMethod = await stripe.paymentMethods.create(
    {
      customer: "cus_Mg94kgGaNl2YS3",
      payment_method: "pm_1Lwmn4LLeb1xbCSQlm4UhSeK",
    },
    {
      stripeAccount: "acct_1LwfZwCGwb4Rcxpz",
    }
  );

  const customer = await stripe.customers.create(
    {
      email: "tester@gmail.com",
      payment_method: paymentMethod.id,
    },
    {
      stripeAccount: "acct_1LwfZwCGwb4Rcxpz",
    }
  );


  const paymentIntent = await stripe.paymentIntents.create(
    {
      amount: 1099,
      currency: "usd",
      customer: customer.id,
      payment_method: paymentMethod.id,
    },
    {
      stripeAccount: "acct_1LwfZwCGwb4Rcxpz",
    }
  );
  res.json({
    client_secret: paymentIntent.client_secret,
    payment_method: paymentMethod.id,

  });```

#

this throws me a client_secret which I am intending to use on confirmPayment

#

          paymentMethodType: "card",
        });```

#

however, it keeps throwing me cardDetails incomplete. what am i missing here

bright ice Oct 25, 2022, 2:18 PM

#

Gotcha. Server is running a bit busy at the moment.
Give me a couple of minutes to take a look and I'll respond as soon as I can

copper spire Oct 25, 2022, 2:20 PM

#

sure thanks

bright ice Oct 25, 2022, 2:27 PM

#

Your server-side code looks fine

#

Must be something client-side

copper spire Oct 25, 2022, 2:28 PM

#

what could be the problem?

#

    const response = await fetch(`${API_URL}/stripe/checkout`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { client_secret, payment_method } = await response.json();
    return { client_secret, payment_method };
  };

  const initializePaymentSheet = async () => {
    try {
      const { client_secret, payment_method, error } =
        await fetchPaymentIntentClientSecret();
      //2. confirm the payment
      console.log(client_secret, payment_method);
      if (error) {
        console.log("Unable to process payment");
      } else {
        const { paymentIntent, error } = await confirmPayment(client_secret, {
          paymentMethodType: "card",
        });
        if (error) {
          alert(`Payment Confirmation Error ${error.message}`);
        } else if (paymentIntent) {
          alert("Payment Successful");
          console.log("Payment successful ", paymentIntent);
        }
      }
    } catch (e) {
      console.log(e);
    }```

#

this is my frontend codes

bright ice Oct 25, 2022, 2:32 PM

#

It could be due to the SDK not finding the right object to retrieve the Payment Method details from.
I'm certain that I've seen this issue somewhere before, lookingg...

#

Can you try using confirmPaymentSheetPayment instead of confirmPayment?

copper spire Oct 25, 2022, 2:34 PM

#

sure gie me amoment

#

then i guess it shouldbe useConfirmPayment sheet as well?

#

useConfirmPaymentSheetPayment?

bright ice Oct 25, 2022, 2:36 PM

#

I believe so

copper spire Oct 25, 2022, 2:37 PM

#

nope its not afunction

gray flume Oct 25, 2022, 2:40 PM

#

hey hanzo, there isnt a confirmPaymentSheet

#

are you referring to something else?

copper spire Oct 25, 2022, 2:43 PM

#

oh btw there is no card element in my codes because im planning to use the backend to do a direct charge

bright ice Oct 25, 2022, 2:44 PM

#

Okay hold on, let's take a step back here.
The front-end code looks a little weird to me. Are there any guides or resources you're following for this?

copper spire Oct 25, 2022, 2:45 PM

#

https://github.com/geraldspacelim/redfluencer_stripe_test/blob/main/src/Home.js

#

similar to this

#

this is our file

#

📎 index.js

#

im not using the Card Element because I have already setup the backend. I believe all i need to do is to press the confirm button to make the payment

bright ice Oct 25, 2022, 2:51 PM

#

I don't see your initPaymentSheet function in the code and I suspect you're mixing up the flows here a bit.

copper spire Oct 25, 2022, 2:54 PM

#

hmm i dont think I need a initPaymentSheet I am not entering the card detials

bright ice Oct 25, 2022, 2:57 PM

#

Right, so yeah I believe you're mixing up the flows here a bit.
In order to charge a saved payment method, you don't really need the client-side confirmation here.

You can just perform the confirmation when you create the PaymentIntent
https://stripe.com/docs/payments/save-and-reuse?platform=react-native&ui=payment-sheet#charge-saved-payment-method

copper spire Oct 25, 2022, 3:00 PM

#

give me a moment

bright ice Oct 25, 2022, 3:14 PM

#

Gerald-RN-error

copper spire Oct 25, 2022, 3:20 PM

#

thanks hanzo you are right!

bright ice Oct 25, 2022, 3:23 PM

#

Awesome! Glad I could help 🙂

#Gerald-RN-error