ziminny-reactnative-purchase | Stripe Developers | Page 1

sudden stream Oct 22, 2021, 12:57 PM

#

shadow heart Oct 22, 2021, 12:58 PM

#

hi , sorry for the inconvenience and my ignorance , i will explain my doubt

sudden stream Oct 22, 2021, 12:58 PM

#

Hi there 👋

#

Products don't get used directly with PaymentIntents. As mentioned here, they're used by Checkout Sessions and Subscriptions:
https://stripe.com/docs/api/products?lang=node

You could use them with a Checkout Session, but those aren't part of our react-native flow.

shadow heart Oct 22, 2021, 1:02 PM

#

So the most recommended for non-subscription products would be to use paymentIntents , in reac-native ?

sudden stream Oct 22, 2021, 1:03 PM

#

That's correct.

shadow heart Oct 22, 2021, 1:03 PM

#

thank you , i'll do it then , settled for me

sudden stream Oct 22, 2021, 1:05 PM

#

👍 Happy to help!

shadow heart Oct 22, 2021, 1:05 PM

#

I have a different question , in fact only this other question is missing and I can proceed , should I open another topic ?

sudden stream Oct 22, 2021, 1:06 PM

#

You can go ahead and ask it here

shadow heart Oct 22, 2021, 1:06 PM

#

ok

#

yesterday there was a guy trying to help me here , but without success

#

Object { "paymentOption": undefined, }

#

I want to know which card the user selected when the modal closes

#

but this value comes in the input payment Sheet and in the presentPaymentSheet

#

const paymentMethod = await initPaymentSheet({ setupIntentClientSecret:client_secret, customerEphemeralKeySecret:ephemeralKey, customerId })

#

const present = await presentPaymentSheet({ clientSecret, })

#

I need to know the payment method he has selected , I imagine that I would be able to find out from paymentOption but it comes in blank , everything goes fine but if the user selects another card I don't know which one he selected

sudden stream Oct 22, 2021, 1:23 PM

#

Hm, I'm not as familiar with these pieces, please bear with me while I consult with a colleague.

shadow heart Oct 22, 2021, 1:27 PM

#

ok

shadow heart Oct 22, 2021, 2:01 PM

#

I don't know if this line is just that

#

` useEffect(() => {
initStripe({
publishableKey:'pk_test_51JhITACm39JVmPJurOWnvLSziJpwa5nV2rRhHr6AYAqEuNwgj9eJNCAsJhzfuG7E3CNMK',

})

},[])`

slow girder Oct 22, 2021, 2:22 PM

#

Hey there, just catching up here

shadow heart Oct 22, 2021, 2:58 PM

#

and I'm suffering friend

#

if I solve this problem today , I will be very happy this weekend

#

I just need the selected id 😭

#

of the payment method *

slow girder Oct 22, 2021, 3:02 PM

#

Ok let's take another look here

shadow heart Oct 22, 2021, 3:03 PM

#

I haven't configured the Scheme url, that's not the problem right?

#

`useEffect(() => {
initStripe({
publishableKey:'pk_test_51JhITACm39JVmPJurOWnvLSziJpwa5nV2rRhHr6AYAqEuNwgj9eJNCAsJhzfuG7E3CNMK',

})

},[])`

slow girder Oct 22, 2021, 3:26 PM

#

where exactly are you getting the result of this?

shadow heart Oct 22, 2021, 3:27 PM

#

const paymentMethod = await initPaymentSheet({ setupIntentClientSecret:client_secret, customerEphemeralKeySecret:ephemeralKey, customerId })

#

}) const present = await presentPaymentSheet({ clientSecret, })

#

in both lines of the same result

#

console.log(paymentMethod)

#

console.log(present)

#

Object { "paymentOption": undefined, }.

#

Object { "paymentOption": undefined, }

slow girder Oct 22, 2021, 4:08 PM

#

Ok i've been reviewing the source code and when you drill down it is expected that this would be returned:
https://github.com/stripe/stripe-react-native/blob/master/src/functions.ts#L306-L326

#

Is this always the case for you, or do you sometimes get the expected paymentOption?

shadow heart Oct 22, 2021, 4:12 PM

#

I'll look at this code you sent a moment

#

I looked at the code , apparently it looks like mine , I always serve ùndefined

#

my code just doesn't have this line const { error } = await NativeStripeSdk.confirmPaymentSheetPayment();

slow girder Oct 22, 2021, 4:19 PM

#

Sorry thats the package source code, you shouldnt need any of that

#

but it looks like this paymentOption doesnt actually include the selected payment method like it seems it might

hazy slate Oct 22, 2021, 4:26 PM

#

catching up here one sec

shadow heart Oct 22, 2021, 4:28 PM

#

ok

hazy slate Oct 22, 2021, 4:33 PM

#

ok so to clarify some things, PaymentSheet doesn't return you the PaymentMethod the customer selected

it is a pre built component that does not provide you a PaymentMethod but rather confirms a PaymentIntent.

so I wouldn't use it for the purpose of getting the PaymentMethod back from it on selection, it will give you a PaymentMethod after PaymentSheet has confirmed the PaymentIntent

shadow heart Oct 22, 2021, 4:41 PM

#

comes the same result , I don't know what I'm doing wrong

#

` const paymentMethod = await initPaymentSheet({
paymentIntentClientSecret:client_secret,
customerEphemeralKeySecret:ephemeralKey,
customerId:customerIdParam,

      }) `

hazy slate Oct 22, 2021, 4:47 PM

#

so what you're doing wrong is expecting a PaymentMethod from initPaymentSheet

#

just treat it as a void function

shadow heart Oct 22, 2021, 4:51 PM

#

I will try with another idea here

#

Everything you said works for paymentIntents that are not linked to subscriptions , but the payment method does not appear in the subscription before , this always went to my doubts , because it pays the subscription and does not open the modal , that 's even why I changed my of course , look at my subscription code there

#

`router.post('/create-subscription-first', async (request , response) => {
const {customerId,priceId} = request.body
try {
const default_payment_method = await getPaymentMethodDefault(customerId)
const ephemeralKey = await stripe.ephemeralKeys.create(
{
customer:customerId
},
{
apiVersion:'2020-08-27'
}
)

  const subscription = await stripe.subscriptions.create({
    customer:customerId,
    items:[
      {
        price:priceId
      }
    ],
    payment_behavior: 'allow_incomplete',
    expand: ['latest_invoice.payment_intent','pending_setup_intent'], 
  })
  const { status , client_secret } = subscription.latest_invoice.payment_intent
  return response.json({ default_payment_method, status,client_secret, ephemeralKey:ephemeralKey.secret , customerId })

} catch (error) {
    console.log("Error Create Subs");
    console.log(error);
    return response.status(404).json({error:'Error'})
}

})`

#

as soon as I put it in PaymentIntent init it works , but I want to be able to select the card before , in normal paymnetIntent it works

#

this was my problem before

#

the modal opens and closes very quickly

hazy slate Oct 22, 2021, 5:11 PM

#

reading up one sec

shadow heart Oct 22, 2021, 5:29 PM

#

Captura_de_Tela_2021-10-22_as_14.29.24.png

#

on android it looks like this, with loading. This only happens with the intent of a subscription.

hazy slate Oct 22, 2021, 5:30 PM

#

one sec

#

reading nopw

#

ah so when the sheet doesn't come up, what I've noticed is that it happens when the PaymentSheet isn't set up correctly

looking at your code

#

ok I'm a bit unclear still

on your mobile side, what are you passing to initialize and present PaymentSheet?
(after you create the Subscription server-side)

#

also what does this mean, can you explain?

but I want to be able to select the card before , in normal paymnetIntent it works

shadow heart Oct 22, 2021, 6:25 PM

#

For the cell phone I'm passing the client_secret of the paymentintent that is inside the subscription!

#

when I send a normal paymentintent it goes as expected and everything is as I want it, but when I pass the client_secret of an intent that is inside a subscription it already completes the subscription, "if I don't have 3d secure" I don't want it it pays straight , I want it to happen like a regular paymnetIntent and Pay 39 ex

hazy slate Oct 22, 2021, 6:27 PM

#

can you share the code for that?

and the logged out values for ephemeral key, client secret, customer ID, etc

#

^for when you try subs\

shadow heart Oct 22, 2021, 6:30 PM

#

I will share the code that everything is ok

#

----------------- BACKEND -------------

#

`router.post("/create-payment-intent", async (request , response) => {

const { customerId } = request.body
try {

const ephemeralKey = await stripe.ephemeralKeys.create(
  {
    customer:customerId
  },
  {
    apiVersion:'2020-08-27'
  }
)
const paymentIntent = await stripe.paymentIntents.create({
  amount: 2000,
  currency: 'eur',
  payment_method_types: ['card'],
  customer:customerId
});`

#

------------- FRONT END -----------

#

const {error , paymentOption} = await initPaymentSheet({ paymentIntentClientSecret:client_secret, customerId, customerEphemeralKeySecret:ephemeralKey })

hazy slate Oct 22, 2021, 6:32 PM

#

yes not just the code but also the logged out values for

client_secret
ephemeralKey
customerId

also

shadow heart Oct 22, 2021, 6:34 PM

#

ek_test_YWNjdF8xSmhJVEFDbTM5SlZtUEp1LGpMc3Q0V0xiR1JVRGswOVIzTEUzMkxpSU1Lc3ZIa0k_00d4GF9CIx cus_KOHVTuKN1SvEfV

#

pi_3JnSZeCm39JVmPJu1Qlm6jaW_secret_PMHFAdFvitu4GGCZBJSzBm2Oh

hazy slate Oct 22, 2021, 6:42 PM

#

and how are you calling presentPaymentSheet() ? code for that too pls, thanks!

and looking

shadow heart Oct 22, 2021, 6:43 PM

#

const teste = await presentPaymentSheet({ })

#

const teste = await presentPaymentSheet({ clientSecret:client_secret, })

#

both ways go wrong

hazy slate Oct 22, 2021, 7:08 PM

#

looking (sorry stretched in a couple of other threads as well)

#

ah I think I got it

#

you are creating the Subscription in allow_incomplete but you want default_incomplete

the PaymentIntent you're using is already succeeded

so PaymentSheet is not showing up (which is incorrect behavior IMO, there should be an exception or error returned) that tells you teh PaymentIntent has already succeeded

#

see this part: https://stripe.com/docs/billing/subscriptions/build-subscription?ui=elements#create-subscription

  subscription = Stripe::Subscription.create(
    customer: customer_id,
    items: [{
      price: price_id,
    }],
    payment_behavior: 'default_incomplete',
    expand: ['latest_invoice.payment_intent']
  )

shadow heart Oct 22, 2021, 7:12 PM

#

I've also tried with default_ incomplete , wait I'll try again and I'll talk to you

hazy slate Oct 22, 2021, 7:14 PM

#

sure

shadow heart Oct 22, 2021, 7:16 PM

#

Object { "error": Object { "code": "Failed", "declineCode": null, "localizedMessage": "The operation couldn’t be completed. (Stripe.PaymentSheetError error 0.)", "message": "The operation couldn’t be completed. (Stripe.PaymentSheetError error 0.)", "stripeErrorCode": null, "type": null, }, }

#

on android there is no error but the screen is locked with modal and loading

hazy slate Oct 22, 2021, 7:18 PM

#

where did you get this? and also please share the PaymentIntent client_secret etc (what you're passing to PaymentSheet) so I can invesitgate

shadow heart Oct 22, 2021, 7:20 PM

#

const teste = await presentPaymentSheet({ }) const teste = await presentPaymentSheet({ clientSecret:client_secret, })

hazy slate Oct 22, 2021, 7:20 PM

#

not the code, the values of the variables, please

#

thanks

shadow heart Oct 22, 2021, 7:20 PM

#

I couldn't , I was looking at the documentation and I thought that 's how to do it , if I do not need a subscription , it was ok

hazy slate Oct 22, 2021, 7:20 PM

#

I want what you gave me here

#

#901088677814493244 message

shadow heart Oct 22, 2021, 7:23 PM

#

ephemeralKey : ek_test_YWNjdF8xSmhJVEFDbTM5SlZtUEp1LDk0Snp0NVhmWXJKVGZKQ0hqWXRTa2hybm53SFZ3ekM_00d7CAbH10 customerId : cus_KOHVTuKN1SvEfV client_secret : pi_3JnTKRCm39JVmPJu0PLriTEN_secret_pdTftTC9p7v20Pxc6VMFkBQ4D

hazy slate Oct 22, 2021, 7:23 PM

#

thanks

#

your request is still passing

  payment_behavior: "allow_incomplete",

https://dashboard.stripe.com/test/logs/req_NnMQZBqkzqJkDR

so your code hasn't made the change I suggested to you

shadow heart Oct 22, 2021, 7:24 PM

#

o status esta vindo como ssucced

#

status : succeeded

#

that's weird

hazy slate Oct 22, 2021, 7:25 PM

#

no it isn't

#

your code is creating a Subscription which creates and confirms a PaymentIntent immediately

#

so PaymentIntent in status succeeded is expected

#

and it is that way because your customer has a default PaymentMethod for Subscription

shadow heart Oct 22, 2021, 7:26 PM

#

This is what I do not want to happen , I only want to make the payment after selecting the card

hazy slate Oct 22, 2021, 7:26 PM

#

invoice_settings.default_payment_method: pm_1JnBS2Cm39JVmPJuzOOgdySP

#

so by default that is used to create the Subscription and pay the PaymentIntents

shadow heart Oct 22, 2021, 7:36 PM

#

it seems that it worked , I 'll test between today and tomorrow , if I have any doubts I 'll talk in the chat , I did what you said , default_imcomplete and took the card as default . Thanks for the time wasted with me, you helped me a lot. Good job.

#

funny this behavior only happen with the subscription, but anyway, it worked.

hazy slate Oct 22, 2021, 7:41 PM

#

not a problem, I'm happy to help!

#

Subscription create and confirm the PaymentIntent under the hood

#

with regular PaymentIntents, you only create the PaymentIntent server-side

#ziminny-reactnative-purchase