Flucadetena
commented
4 months ago Hi @VimarsSpaceo we had a similar issue long time ago. Let me guide you through the solutions and problems we encountered and what we are migrating right now. Hope it helps.
Our current flow: The user adds the cards s/he wants to use in the future and we save only his "default/preferred" selection. When s/he wants to pay for something we retrieve his "favorite" card or all if he navigates to the "Card selection" page to change the one he wants to use.
Problems in this flow:
- There is no secure way to add Cards to Stripe with data you gathered in you custom form. There are some old options but they throw warnings or errors as it is not a secure way. Plus Stripe cannot verify the data while the user is adding it. So you may encounter more problems.
Solution:
- We opt to use the CardFormField Widget. This only adds the form to enter the card and you get the needed data to then add it to Stripe securely through your server.
- This has some small issues in IOS. The CardFormField does not support style customization in IOS (In android you can change a lot). In IOS you can only change the "backgroundColor".
- Also in IOS the form style adapts to the System ThemeMode (light or dark). So if you app theme is not align/controlled with the system theme you will have issue with the "textColor" and the "bordersColor" of the form.
- A solution that I have use in the past is just show the form or the page/dialog/bottomsheet in which the form is included with the color that creates the contrast. Even if is the "wrong" theme. (Meaning your user has the app in lightMode but the System ThemeMode is dark. All your app has white background but the form appears in "black".) Not the best but a simple compromise.
To make this work you: On you server have to create functions to:
- GetOrCreate an Stripe customer.
- Retrieve all the users cards.
- Add a new card.
- Delete a card.
- To get or create a stripe client is pretty straight forward in the docs. But you do it with:
/// To check if the user already exists I store his "stripeId" in the db and check if that value exists. If not I create it.
const customer = await stripe.customers.create({ /// Or any other data you may have an want to be linked to the stripe user. email: user.mail, /// Optional to save any reference you might want to link your db with the Stripe records. Or search in the Stripe dashboard. metadata: { anyReferenceYouWant: UserIdInYourDb }, });
2. Retrieve all the cards:const paymentMethods = await stripe.paymentMethods.list({ customer: customer.id, type: "card" }); console.log("PaymentMethods: ", paymentMethods);
const response = paymentMethods.data;3. Add a new Card
- First you need a "setupIntent" from the server. This is an intent that represent an intention to charge the user in the future. And you need to return the "client_secret" to use it the the form and "saving" part.const setupIntent = await stripe.setupIntents.create({ customer: customer.id }); console.log("setupIntent: ", setupIntent); return client_secret: setupIntent.client_secret;
- In flutter:// You show the CardFormField widget wherever you want. The important part is the "cardDetails", you must check the info is complete. I disable the "Add" button until the data is complete. Like this: onPressed: _cardDetails == null || !_cardDetails!.complete ? null : ()=> saveNewCard(). CardFormField( /// This only affects Android. Except for the "backgroundColor" that also affects IOS. style: CardFormStyle( backgroundColor: Colors.transparent, borderColor: Theme.of(context).colorScheme.onBackground.withOpacity(.7), borderWidth: 1, borderRadius: themeBorderRadius.toInt(), cursorColor: Theme.of(context).colorScheme.onBackground, textColor: Theme.of(context).colorScheme.onPrimary, textErrorColor: Theme.of(context).colorScheme.error, placeholderColor: Theme.of(context).colorScheme.onBackground.withOpacity(.7), ), onCardChanged: (cardDetails) { /// This is the data you need. setState(() { _cardDetails = cardDetails; }); }, ),
// The you have a button saying "Add" or the like that will trigger the adding of the card to the users Stripe account.
//Function to save payment method. You don't need to pass the info from the "CardDetails" object, stripe does that for you.
Future
// 3. Confirm setup intent
await Stripe.instance.confirmSetupIntent(
paymentIntentClientSecret: clientSecret,
params: const PaymentMethodParams.card(paymentMethodData: PaymentMethodData()));
await fetchPaymentMethods();
} catch (err) {
showGetSnackBar(message: 'Something happen saving your new card, please try again later');
rethrow;
}}
Now you can retrieve the cards again to get the newly added card.
4. Delete existing card
- For this you need the cardId. When you retrieve all the users cards you get the "id" of the card among other data. Make him choose the one and send it to a function in your server.
Server function:const deletedCard = await stripe.paymentMethods.detach(paymentMethodId); console.log("Deleted card: ", deletedCard);
You don't event need the CustomerId for this part.
***Things to consider**
- To avoid showing the user the same card multiple time you can check the "fingerprint" element in the card info. As the user can save multiple times the same card and the "Id" will be different, but the "fingerprint" wont.
DONE. This is the way I use but there is a newer way as the CardFormField is being deprecated. You can use the "CustomerSheet" that it is currently in beta on Futter.
- I'm currently working on this implementation, i'll get back to you tomorrow with how it works in case you prefer this method.
Hope it helps ;)
VimarsSpaceo
Describe the bug I am developing a feature to payment with card but the app flow is something like this First I have to get card details from user and pass it to stripe and stripe will return me a token for this particular card and I have to pass it to backend for future reference
And with the token of card I will trigger the payment without showing any SDK or native payment sheet
So big question is how to get card token Didn't find any method which will accept card details like card number, expiry date, CVV etc