alexzada - error

[waxen river]

Can you send me the snippet of your code that is throwing this error?

[storm void]

await handleNextActions(paymentIntentClientSecret)

paymentIntentClientSecret comes from my server

[waxen river]

Can you send me the entire function?

[storm void]

yep, 1 sec

`const handlePay = async () => {
setLoading(true)

const { paymentMethod, error: createPaymentMethodError } = await createPaymentMethod({
  paymentMethodType: 'Card',
})

if (createPaymentMethodError) {
  Alert.alert('Error', 'Houve um erro ao executar o pagamento. Por favor, tente novamente.')
  return
}

await createPaymentIntent({
  createPaymentIntentParams: {
    paymentMethodId: paymentMethod.id,
  },
  onSuccess: async (data) => {
    const { error: createIntentPaymentError, status, paymentIntentClientSecret } = data

    if (createIntentPaymentError) {
      Alert.alert('Error', 'Houve um erro ao executar o pagamento. Por favor, tente novamente.')
      return
    }

    if (status === 'active') {
      Alert.alert('Success', 'Pagamento efetuado com sucesso!')
    }
  
    if (status === 'incomplete') {
      await handleNextActions(paymentIntentClientSecret)
    }
  },
  onError: () => console.log('error'),
})

setLoading(false)

}`

export const createPaymentIntent = async ({ createPaymentIntentParams, onSuccess, onError, }:{ createPaymentIntentParams?: { paymentMethodId?: string, paymentIntentId?: string, }, onSuccess: (data: { paymentIntentClientSecret: string, status: string, error?: string, }) => void, onError: () => void }) => { try { const { data } = await axiosInstance.post('http://192.168.0.131:4242/pay', createPaymentIntentParams) onSuccess(data) } catch (error) { onError() } }

[waxen river]

Hey apologies that I dropped off this thread for a bit. Can you try using just handleNextAction? As far as I can tell, we actually do not have a function defined that is called handleNextActions

[storm void]

I'm sorry, I missed a snippet of code, the handleNextActions function is a custom function of mine that calls handleNextAction inside it

`const handleNextActions = async (paymentIntentClientSecret: any) => {
const { error: requiresActionError, paymentIntent } = await handleNextAction(paymentIntentClientSecret)

if (requiresActionError) {
  Alert.alert(`Error code: ${requiresActionError.code}`, requiresActionError.message)
  return
} 

if (paymentIntent.status === PaymentIntent.Status.RequiresConfirmation) {
  await createPaymentIntent({
    createPaymentIntentParams: {
      paymentIntentId: paymentIntent.id,
    },
    onSuccess: (data) => {
      const { error: requiresActionResponseError } = data

      if (requiresActionResponseError) {
        Alert.alert('Error', requiresActionResponseError)
        return
      } 
      
      Alert.alert('Success', 'Pagamento efetuado com sucesso!')
    },
    onError: () => Alert.alert('Error', 'Erro ao efetuar pagamento!'),
  })
} else {
  Alert.alert('Success', 'Pagamento efetuado com sucesso!')
}

}`

[worthy gulch]

Sorry about the delay, been busy here, taking another look at this

[storm void]

ok, no problems

[civic basin]

👋 stepping in. Can you confirm you are importing handleCardAction in that file?

And what version of the React Native SDK are you using?

[storm void]

of course, it's here, import { CardField, useStripe, initStripe, PaymentIntent, } from '@stripe/stripe-react-native'

const { createPaymentMethod, handleNextAction } = useStripe()

[civic basin]

You don't initialize handleCardAction from useStripe

[storm void]

estava usando a 0.8.0 até hoje de manhã, atualizei para 0.9.0 há algumas horas

[civic basin]

You import it directly

So add it to your import list there

[storm void]

there is no handleCardAction there so I tried importing handleNextAction but it keeps giving the same error

[civic basin]

Ah I misread before and thought you were attempting to use handleNextAction. Yes, handleCardAction is not a method in our SDK.

You would need to use handleNextAction

Let's back up a moment

[storm void]

ok

[civic basin]

I assume you are attempting to handle 3DS if it is required, yes?

[storm void]

exactly

[civic basin]

Okay and you look to be using CardField

[storm void]

yep

[civic basin]

Is there a reason you aren't confirming client-side using confirmPayment?

[storm void]

the integration we are doing is synchronous with completion on the server, I believe that confirmPayment would not work for this case

basically our flow is, the customer puts the card information, I make a call to the route that creates a subscription in the backend and this route returns the status

[civic basin]

Ah okay you are following our docs for manual confirmation

That flow wouldn't really be the same here for a Subscription... though it could work

The typical flow would be to create the Subscription with status: incomplete and pass the client_secret client-side to confirm with confirmPayment

[storm void]

what could i do for my case then?

[civic basin]

I'd recommend using the flow I just mentioned. If you so desire, you can instead use handleNextAction .... handleCardAction is a typo in our docs and is a Stripe.JS method: https://stripe.com/docs/js/payment_intents/handle_card_action

I'll get that fixed up in the docs

[storm void]

but I keep getting the error that handleNextAction is not a function 😕

[civic basin]

The screenshot you provided isn't an error?

It is just showing you how the method works

Unless you are talking about the original error that you started the thread with?

[storm void]

this screenshot?

[civic basin]

Which makes sense because you didn't have handleNextAction imported

Sorry I was referring to the most recent one

[storm void]

yep

[civic basin]

Yeah you need to import handleNextAction

[storm void]

but even after i imported it correctly, it keeps giving the error

import { CardField, useStripe, initStripe, PaymentIntent, handleNextAction, } from '@stripe/stripe-react-native'

[civic basin]

Where are you seeing that error exactly?

In your emulator?

[storm void]

yep

[civic basin]

What do you see in Metro?

[storm void]

because of my implementation, nothing

` const { error: requiresActionError, paymentIntent } = await handleNextAction(paymentIntentClientSecret)

if (requiresActionError) {
  Alert.alert(`Error code: ${requiresActionError.code}`, requiresActionError.message)
  return
} `

since requiresActionError is true it puts an Alert on the screen

[civic basin]

Thanks that helps

Actually I think I know the issue.... pretty sure this flow doesn't work if you don't have confirmation_method: manual set on the PaymentIntent. That is a weird error for us to throw though.

Can you try using confirmPayment instead of handleNextAction here and let me know what happens?

[storm void]

of course, I directly import like handleNextAction?

[civic basin]

Yep

[storm void]

just change where there is handleNextAction by confirmPayment?

would it be this? const { error: requiresActionError, paymentIntent } = await confirmPayment(paymentIntentClientSecret, { paymentMethodType: 'Card', })

[civic basin]

Yeah I think thats right except it would be const {paymentIntent, error} = await confirmPayment()

I don't think the error will specifically be a requiresActionError

[storm void]

is that I have error defined just above, so I just renamed the variable

[civic basin]

Ah right right

[storm void]

nothing happened, neither on the emulator nor on the Metro

[civic basin]

What test card are you using?

[storm void]

4000 0000 0000 0341

[civic basin]

Can you provide the PaymentIntent ID that you are testing with?

[civic basin]

Why are you using this card? 🙂

It declines on charge

[storm void]

where can i get this?

[civic basin]

https://stripe.com/docs/testing#declined-payments

If you want to test 3DS you should be using one of the cards here: https://stripe.com/docs/testing#3d-secure-mobile-challenge-flows

[storm void]

can i use this 4000 0025 0000 3155?

[civic basin]

Yeah that should work too

[storm void]

nothing happens yet

[civic basin]

If you go to https://dashboard.stripe.com/test/logs in your Dashboard can you grab your most recent request and provide the ID here (req_xxxxx)?

[storm void]

I tested it on my fixed cell phone and it gave an error

[storm void]

req_zVqaSn94bliEfY

[civic basin]

Okay can you log out the client_secret that you are using with confirmPayment?

[storm void]

not logging in where I put the log, I'll see what happened, a moment

I had changed the wifi and forgot to change the url in the api call...

this error appears now

[civic basin]

lol glad we figured that out

[storm void]

` const { error: requiresActionError, paymentIntent } = await confirmPayment(paymentIntentClientSecret, {
paymentMethodType: 'Card',
})

console.log('paymentIntent', paymentIntent)`

this log paymentIntent undefined

[civic basin]

Cause you hit an error above

About paymentMethodType

But paymentMethodType looks right to me there.... 🤔

[storm void]

for me too 🤷

[civic basin]

Can you try just setting type: 'Card'

[civic basin]

Yeah okay that's right... it should be paymentMethodType so that should error

[storm void]

but putting type works, I'm confused

[civic basin]

Oh okay

Ah okay okay

I think your Android version is behind

For the Stripe Android SDK

Wonder if that is why you saw the error previously about the method not existing as well

[storm void]

how can we check this?

[civic basin]

Yep one sec

Figuring that out cause don't remember off top of head

[storm void]

ah, ok

[civic basin]

Okay so open your gradle.properties

Should be in your android/src directory I believe

[storm void]

I'm using expo, I believe I don't have that

[civic basin]

lol ah didn't realize you are using expo

That is the issue

https://docs.expo.dev/versions/latest/sdk/stripe/

Okay so Expo is tied to a specific Stripe React Native version

So it sounds like you tried to install the latest Stripe RN SDK (0.9.0) while using Expo

As opposed to using expo install @stripe/stripe-react-native which will install the correct version for your Expo SDK

[storm void]

so i remove the dependency i installed earlier and install using expo install @stripe/stripe-react-native?

[civic basin]

Yes

[storm void]

ok, one moment

ok, one moment

installed this version "@stripe/stripe-react-native": "0.2.3",

[civic basin]

Yep okay

That's the latest version of our SDK supported on Expo

Alright so this is likely also why you were seeing the error with handleCardAction earlier... that was changed to handleNextAction in 0.7.0: https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md#070

Okay so now back to the beginning.

The recommended route here is to just use confirmPayment

I think you can also use handleCardAction if you so desire, and want to then confirm the PaymentIntent later (though I haven't tested this on a Subscription flow so you would need to test).

But if you want to charge immediately upon the customer completing 3DS then you should just be using confirmPayment

[storm void]

what is the difference between handleCardAction and confirmPayment?

[civic basin]

handeCardAction is designed to allow you to control when you actually complete the payment.

So with the manual confirmation flow a server-side confirmation is still required after handleCardAction is resolved successfully

That is the flow detailed here: https://stripe.com/docs/payments/accept-a-payment-synchronously?platform=react-native

We really don't recommend this flow.

It just adds complexity

There are a few use-cases that require it, so we support it. But really you should just confirm the payment when the card details are entered and handle it all client-side without needing to re-confirm on your server thereafter

[storm void]

While we're at it, let me ask you a question, we're currently using this synchronous stream that ends in the backend. Since our app connects customers with drivers who can transport objects and the main flow is, a customer requests a ride, pays for it, and this payment can be made in installments, and after payment confirmation the driver goes to the customer and takes his order, what would be the recommended flow for this type of app that needs payment confirmation right away?

[civic basin]

I'm confused, why does that flow require backend confirmation?

The payment is up front for the ride, no?

[storm void]

because it was the way we found to confirm that the payment was actually made

[civic basin]

Ah okay so you aren't using Webhooks then

[storm void]

nop

[storm void]

yep

[civic basin]

Gotcha

So yeah the recommended route here is to use Webhooks

That said... this synchronous flow does function as a workaround to ensure you aren't missing reconciling payments

But it is pretty limiting

[storm void]

but, how would I tell my frontend at the time of payment that the payment was completed using webhooks?

[civic basin]

You either handle the result of confirmPayment or you could wait for the webhook.

It depends on what you need to do on your frontend.

[storm void]

I don't quite understand this part yet 😣

[civic basin]

Sure so confirmPayment will resolve into a paymentIntent when successful.

You can test this out right now

I don't remember exactly what we return via the SDK

But you can take a look at that response. If it isn't enough information, you would pass that PaymentIntent ID back to your server and retrieve the PaymentIntent from there (using: https://stripe.com/docs/api/payment_intents/retrieve)

That will give you full details on the PaymentIntent

This isn't foolproof though, which is why we recommend Webhooks.

It is possible that the client drops off after completing 3DS and the promise doesn't resolve client-side. In this case you want your Webhook to catch that payment

And also in this case your client dropped off so you don't need to worry about displaying anything client-side in that case.

[storm void]

there are so many buts haha, but ok, I'll try to absorb it all and give the guide another read

[civic basin]

Really you should ignore the guide you were looking at before.

[storm void]

ok

[civic basin]

This is the flow you should really follow: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements

Since you are using Subscriptions

In that flow, replace any time it discusses Elements with using the CardField with React Native

[storm void]

ok, thank you very much for your willingness to help