MidnighttFoxx | Stripe Developers | Page 1

fossil bearBOT Oct 19, 2022, 12:05 AM

#

nimble monolith Oct 19, 2022, 12:05 AM

#

Hi there

hardy stag Oct 19, 2022, 12:05 AM

#

hello. how are you?

nimble monolith Oct 19, 2022, 12:06 AM

#

Good thanks. Hope you are doing well, too. Which Mobile SDK are you using?

hardy stag Oct 19, 2022, 12:06 AM

#

react native

nimble monolith Oct 19, 2022, 12:06 AM

#

Gotcha. And you are looking to pre-fill certain parts of Card Form? Or what are you trying to accomplish exactly?

hardy stag Oct 19, 2022, 12:07 AM

#

essentially i have the users store their credit card information elsewhere and then can pick from a dropdown the card they want to fill to cardField with to actually make the payment

nimble monolith Oct 19, 2022, 12:08 AM

#

Hmmm that doesn't really make sense. Why use the CardForm at all here then?

#

The CardForm is for collecting a new payment method.

#

If you already have the PaymentMethod stored then there is really no reason to use CardForm

#

Also I assume you are aware of the PCI implications of handling these raw PANs, yes?

hardy stag Oct 19, 2022, 12:09 AM

#

i am giving the users an option to either enter an unstored card or to pick from one they alreadt have stored, i also havent been able to find a way to use the stored cards to have the payments actually go through

nimble monolith Oct 19, 2022, 12:10 AM

#

Lets back up one sec.

hardy stag Oct 19, 2022, 12:10 AM

#

also yes i am aware. the app is not launched yet so there is no fear there right now

nimble monolith Oct 19, 2022, 12:10 AM

#

Are you handling card details yourself or are you always collecting them through Stripe?

hardy stag Oct 19, 2022, 12:11 AM

#

i wanted to do it all through stripe but i could not get that working

nimble monolith Oct 19, 2022, 12:11 AM

#

Okay gotcha, that is definitely the recommended way and I'm happy to help you get that working.

hardy stag Oct 19, 2022, 12:11 AM

#

perfect thank you

nimble monolith Oct 19, 2022, 12:11 AM

#

So what part are you blocked at? It sounds like you are able to successfully collect card details the first time and create a payment?

hardy stag Oct 19, 2022, 12:12 AM

#

i tested the card input i created with the 4242 test card and the payment succesfully went through

nimble monolith Oct 19, 2022, 12:12 AM

#

Great

hardy stag Oct 19, 2022, 12:12 AM

#

i am not sure how to actually store the credit card after that

nimble monolith Oct 19, 2022, 12:13 AM

#

Gotcha

#

So https://stripe.com/docs/payments/save-during-payment-cards-only is the guide you want to follow

Save a card during payment with the Card Element

Learn how to save card details during a payment using the Card Element.

#

Are you currently creating a Customer object server-side?

hardy stag Oct 19, 2022, 12:14 AM

#

yes

nimble monolith Oct 19, 2022, 12:14 AM

#

Great

#

And are you passing setup_future_usage on the PaymentIntent?

hardy stag Oct 19, 2022, 12:14 AM

#

no

#

i could snapshot some code if that would help

nimble monolith Oct 19, 2022, 12:15 AM

#

Nah not yet

#

So when you create your PaymentIntent go ahead and also pass setup_future_usage: 'off_session': https://stripe.com/docs/api/payment_intents/create#create_payment_intent-setup_future_usage

#

That way, when you confirm the PaymentIntent client-side, the new PaymentMethod will be automatically attached to the Customer

#

And you can then charge it again in the future without needing to collect details again

#

Give that a try and let me know if you see the PaymentMethod attached to the Customer successfully.

hardy stag Oct 19, 2022, 12:16 AM

#

sure thing thank you

nimble monolith Oct 19, 2022, 12:16 AM

#

Then we can talk about how to charge that PaymentMethod later on

hardy stag Oct 19, 2022, 12:18 AM

#

i do see the card added to the user

nimble monolith Oct 19, 2022, 12:20 AM

#

Okay perfect. So when a Customer returns to your App you are going to use https://stripe.com/docs/api/payment_methods/customer_list to list out any attached PaymentMethods

#

And you will build out a UI to allow them to select one of these PaymentMethods if they want to charge a saved PaymentMethod

#

If they choose a saved PaymentMethod, then you create and confirm a PaymentIntent server-side to charge it again as we show here: https://stripe.com/docs/payments/save-during-payment-cards-only?platform=react-native#react-native-create-payment-intent-off-session

Save a card during payment with the Card Element

Learn how to save card details during a payment using the Card Element.

hardy stag Oct 19, 2022, 12:22 AM

#

is this all in the frontend?

#

also i am not sure if the way i am creating a customer is correct

nimble monolith Oct 19, 2022, 12:22 AM

#

The above is all on the server

hardy stag Oct 19, 2022, 12:23 AM

#

gotcha

nimble monolith Oct 19, 2022, 12:23 AM

#

How are you creating the Customer?

hardy stag Oct 19, 2022, 12:23 AM

#

i call const customer = await stripe.customers.create({
name,

#

email,
phone<

#

didnt mean to send that in three messages

nimble monolith Oct 19, 2022, 12:24 AM

#

Yeah that is fine

hardy stag Oct 19, 2022, 12:24 AM

#

ok, but i am always passing in the same name email and phone for the time being

#

is that going to cause problems

#

it seems like a new customer is created each time i create a payment intent

nimble monolith Oct 19, 2022, 12:25 AM

#

We don't de-duplicate for you

#

You can create multiple Customers with same info if you want.

#

But really you will need to add an authentication system to your App

#

So that you pair a Customer ID to a user

hardy stag Oct 19, 2022, 12:25 AM

#

yea that is already in place, im just using this for the stirpe integaration

#

stripe*

nimble monolith Oct 19, 2022, 12:26 AM

#

Gotcha. Well you can test using the same info, that's fine.

hardy stag Oct 19, 2022, 12:27 AM

#

am i pulling the customer id from the customer i created with the above line

nimble monolith Oct 19, 2022, 12:28 AM

#

What do you mean by that?

#

Yes you should pass customer.id to your PaymentIntent

#

If that's what you are asking

hardy stag Oct 19, 2022, 12:28 AM

#

in the link you provided it does listPaymentMethods(
'cus_MbuuJzuEguLdkH',
{type: 'card'}
)

#

where is the first parameter coming from

nimble monolith Oct 19, 2022, 12:29 AM

#

Ah yes

#

That is the customer.id from when you create your Customer object

hardy stag Oct 19, 2022, 12:29 AM

#

gotcha

#

so once ive created that method in the backend how do i actually get the saved cards

nimble monolith Oct 19, 2022, 12:34 AM

#

In what sense? That list method returns you the saved cards

#

Specifically the PaymentMethod object represents a card

#

And you want to pass the PaymentMethod ID to a PaymentIntent to charge a saved card

hardy stag Oct 19, 2022, 12:36 AM

#

so i should have two payment intents: 1. if the user inputs a new card and 2. if the user selects a pre-existing card from a list i created in the UI

nimble monolith Oct 19, 2022, 12:36 AM

#

Two different flows, but they both use a PaymentIntent.

#

You don't need to create two PaymentIntents every time the user visits your page

#

When they click "pay" you execute the "new card flow" or the "saved card flow"

hardy stag Oct 19, 2022, 12:37 AM

#

ah

nimble monolith Oct 19, 2022, 12:37 AM

#

Basically you fetch your backend when they hit your "pay" button

#

So on page load you fetch backend to display any saved PaymentMethods, then you fetch again on "pay" to execute the payment flow

hardy stag Oct 19, 2022, 12:41 AM

#

so do i call in the backend both stripe.customers.listPaymentMethods and stripe.paymentMethods.list

nimble monolith Oct 19, 2022, 12:42 AM

#

Just use stripe.customers.listPaymentMethods

#

It is confusing that both exist but basically just ignore stripe.paymentMethods.list

hardy stag Oct 19, 2022, 12:57 AM

#

im sorry, im a little lost on how to display the cards or do the separate flows

nimble monolith Oct 19, 2022, 12:58 AM

#

No problem

#

What is confusing you specifically?

#

What steps have you done so far?

hardy stag Oct 19, 2022, 12:59 AM

#

when i tried to fetch on initial page load i got a bunch of errors like maximum call stack size exceeded and exception in host function <unknown>

nimble monolith Oct 19, 2022, 12:59 AM

#

Are you using useEffect?

hardy stag Oct 19, 2022, 12:59 AM

#

yea

nimble monolith Oct 19, 2022, 12:59 AM

#

Can you share your code?

hardy stag Oct 19, 2022, 1:01 AM

#

finite fulcrum Oct 19, 2022, 1:03 AM

#

👋 stepping in on behalf of bismarck since he has to step away.

hardy stag Oct 19, 2022, 1:03 AM

#

hello

finite fulcrum Oct 19, 2022, 1:04 AM

#

what's the full stack trace for the error(s) that you get? And i see that the constants declared seem to have an issue too?

hardy stag Oct 19, 2022, 1:04 AM

#

those consts are just unused right now

#

[Unhandled promise rejection: RangeError: Maximum call stack size exceeded.]
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:66:31 in <anonymous>

... 89 more stack frames from framework internals

#

[Unhandled promise rejection: Error: Exception in HostFunction: <unknown>]
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:321:6 in enqueueNativeCall
at node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:149:8 in nonPromiseMethodWrapper
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:440:2 in createTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:217:15 in setTimeout
at node_modules@firebase\firestore\dist\rn\prebuilt.rn-3ca9030c.js:11762:37 in <anonymous>
at node_modules@firebase\firestore\dist\rn\prebuilt.rn-3ca9030c.js:11756:15 in n.targetChanges.forEach$argument_0
etc. etc.

finite fulcrum Oct 19, 2022, 1:08 AM

#

okay, that's interesting, does the fetch successfully hit your server?

hardy stag Oct 19, 2022, 1:09 AM

#

i believe so

#

my goal with this fetch was to get the stored credit cards to display them

#

its the same fetch im making when doing the actual payment

finite fulcrum Oct 19, 2022, 1:10 AM

#

please check

#

and what is your server returning to the fetch request?

hardy stag Oct 19, 2022, 1:12 AM

#

i cant even load the screen, so my guess is it doesnt hit the server

finite fulcrum Oct 19, 2022, 1:13 AM

#

when you say you can't even load the screen, do you mean the application's screen/page isn't loading for you?

hardy stag Oct 19, 2022, 1:13 AM

#

when i navigate to the screen with this fetch call it immediately gives me an error

finite fulcrum Oct 19, 2022, 1:15 AM

#

You implemented the server right? Can you check the logs of the server to be sure?

hardy stag Oct 19, 2022, 1:16 AM

#

the last log on the server was like 20 minutes ago when i last sent in a payment

finite fulcrum Oct 19, 2022, 1:16 AM

#

so it looks like your fetch did hit the server am i right?

#

since you're able to view the log on the server where you sent in a payment?

hardy stag Oct 19, 2022, 1:17 AM

#

yea but that was for when i pressed the pay button after inputting card details

#

the problem im having is getting the stored cards for the user and displaying them

finite fulcrum Oct 19, 2022, 1:21 AM

#

to confirm - is that screenshot of the fetch code you shared going to retrieve the stored cards for the user as well?

hardy stag Oct 19, 2022, 1:22 AM

#

that was the intention, but it doesnt seem like it will

#

i make that call in the frontend

#

in the backend i call stripe.customers.listPaymentMethods

#

however i dont do anything with that call

finite fulcrum Oct 19, 2022, 1:31 AM

#

can you comment out the entire fetch and the corresponding useEffect? what happens then?

hardy stag Oct 19, 2022, 1:32 AM

#

i am able to type into the cardField and successfully complete the payment

#

i need to get the stored cards, and display them for the user to then pick and if they pick one use that in the paymentIntent

finite fulcrum Oct 19, 2022, 1:41 AM

#

Can you add more log lines to the inside of your fetch function, namely :

just before const response...
just before const data...
after the if condition

#

then let me know what's the output when you try to run

hardy stag Oct 19, 2022, 1:44 AM

#

i get output right before response but thats it

finite fulcrum Oct 19, 2022, 1:46 AM

#

is this error from your server? Unhandled promise rejection: Error: Exception in HostFunction: <unknown>

hardy stag Oct 19, 2022, 1:46 AM

#

yea

#

actually no not quite

#

Error: Exception in HostFunction: <unknown>

finite fulcrum Oct 19, 2022, 1:56 AM

#

you mentioned that you're able to complete payment after pressing the pay button - are you doing another fetch call elsewhere to get the PaymentIntent?

hardy stag Oct 19, 2022, 1:57 AM

#

bismarck told me that i should be doing one fetch on page load to grab the stored cards and display them to the user to pick from and then a second fetch when the user actually completes the payment when clicking the pay button

finite fulcrum Oct 19, 2022, 2:04 AM

#

i think you should try simplifying your code first, and start from there i.e. remove all other functions and methods, and just try to fetch on page load, and display what you've fetched

#

honestly, it's a bit difficult to try and troubleshoot without looking your entire application code

hardy stag Oct 19, 2022, 2:06 AM

#

could you explain to me how i am supposed to get the values from my call to stripe.customers.listPaymentMethods

finite fulcrum Oct 19, 2022, 2:07 AM

#

i'm a bit confused, where are you calling stripe.customers.listPaymentMethods?

hardy stag Oct 19, 2022, 2:08 AM

#

in my index.js file in my backend

finite fulcrum Oct 19, 2022, 2:09 AM

#

alright, what do you mean by how are you supposed to get the values? When you call this method, you will get the corresponding response / values

hardy stag Oct 19, 2022, 2:10 AM

#

right so i have a function const paymentMethods = await stripe.customers.listPaymentMethods(
customer.id
{type: 'card'})
but what do i do with that paymentMethods const

finite fulcrum Oct 19, 2022, 2:11 AM

#

then i assume you would return it to your frontend and display it

#

for example, if you're using Express in your backend, you can return values using https://expressjs.com/en/4x/api.html#res

hardy stag Oct 19, 2022, 2:22 AM

#

even if i do that it doesnt resolve the issue that i can't fetch on initial page load

finite fulcrum Oct 19, 2022, 2:29 AM

#

yep i get that. Unfortunately i don't know why you can't fetch on initial page load too and my suggestion for you is to simplify your application to the bare minimum to try and figure out what's the issue

hardy stag Oct 19, 2022, 2:29 AM

#

ok thank you

hardy stag Oct 19, 2022, 3:03 AM

#

i havent resolved that error yet, but i am having the problem where every time i create a paymentIntent it creates a new customer which in turn means there is never going to be a card to display

finite fulcrum Oct 19, 2022, 3:07 AM

#

like what bismarck mentioned before, you would want to add an authentication system to your App so that you pair a Customer ID to a user. When a user logs in, you will always retrieve / use that specific Customer paired to them.

#

for now, if you're just testing, you can choose to always retrieve the same Customer (instead of always creating a new one)

#MidnighttFoxx