maufcost-react-native | Stripe Developers | Page 1

tame hull Jul 8, 2022, 5:57 PM

#

Hi there!

formal glade Jul 8, 2022, 5:57 PM

#

Hey! 🙂

tame hull Jul 8, 2022, 5:57 PM

#

As the error states, you haven't collected a PaymentMethod yet so you can't confirm the PaymentIntent to create a charge.

#

What are you using on your front end?

#

Payment Sheet?

#

Card Form?

formal glade Jul 8, 2022, 5:58 PM

#

Correct. I'm using only the card form on the tutorial here: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom

tame hull Jul 8, 2022, 5:58 PM

#

Great

#

So as those docs point out, you don't pass confirm: true on your server.

#

You create the PaymentIntent on your server and then pass the client secret to your client.

#

From there you use confirmPayment() on your client to actually confirm the PaymentIntent and create the charge

formal glade Jul 8, 2022, 6:00 PM

#

I removed the confirm prop from the server side now. I'm already sending the client secret to the client. I'm going to run it without the confirm prop now. 1 sec

#

Ok. The payment intent is created, but the payment intent is not confirmed.

#

It says: The PaymentIntent requires a payment method

tame hull Jul 8, 2022, 6:04 PM

#

Correct.

#

Now you collect the PaymentMethod on the client via Card Form.

#

Then when the customer hits your "pay" button you call const {paymentIntent, error} = await confirmPayment(clientSecret, { paymentMethodType: 'Card', paymentMethodData: { billingDetails, }, });

#

Like we show here: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom#react-native-submit-payment

formal glade Jul 8, 2022, 6:05 PM

#

Yep.

I get the confirm hook from: const { confirmPayment } = useStripe()

And confirm as such:
const { paymentIntent, error } = await confirmPayment(clientSecret, {
paymentMethodType: 'Card',
paymentMethodData: { billingDetails },
})

tame hull Jul 8, 2022, 6:06 PM

#

Yep all is correct then

#

So hook that up to your pay button

#

And then once you click "pay" you will see a successful PaymentIntent

formal glade Jul 8, 2022, 6:07 PM

#

That's so weird. It's already hooked up. I can see the function being called, but the payment intent is just created and not confirmed

tame hull Jul 8, 2022, 6:08 PM

#

Can you share your full client-side code?

#

And have you added logs to each step?

formal glade Jul 8, 2022, 6:08 PM

#

tame hull And have you added logs to each step?

Yes.

formal glade Jul 8, 2022, 6:08 PM

#

tame hull Can you share your full client-side code?

I can share some snippets. 1 sec

#

And the import and the hook respectively come from:
import { CardField, useStripe } from '@stripe/stripe-react-native';

#

const { confirmPayment } = useStripe()

tame hull Jul 8, 2022, 6:12 PM

#

Okay let's add a log for clientSecret right before confirmPayment()

#

Also what are you seeing in Metro?

#

Oh wait

#

You aren't logging paymentIntent or error

#

Okay yeah

#

So after confirmPayment log out error

#

There you go

#

So you are using the wrong keys

formal glade Jul 8, 2022, 6:14 PM

#

Is this because I'm using the 424242... card with my live keys?

tame hull Jul 8, 2022, 6:14 PM

#

You need to use your test secret and publishable keys here

#

Yep

formal glade Jul 8, 2022, 6:15 PM

#

Oh gotcha. I was using the 4242 card because I wanted to test if processing payments with the live keys would work

#

So, to really test the production keys, I need to use an actual card, right?

tame hull Jul 8, 2022, 6:15 PM

#

Yes, however testing in live mode is against card network regulations so I can't recommend that you do that.

formal glade Jul 8, 2022, 6:16 PM

#

Got it. So you can say that if processing payments works successfully with the test keys, it will work with the live keys just as fine with real cards?

tame hull Jul 8, 2022, 6:19 PM

#

Yep

formal glade Jul 8, 2022, 6:20 PM

#

Dude. This is awesome. Thanks for the very prompt help. You guys rock.

#maufcost-react-native