Possible to just capture and save users credit card ?

[SogoGolf]

We have a requirement from our Flutter app, where the user should be able to enter their payment detalis (credit card), and have those details saved to Stripe so they can be used later (eg. end of each month).

How can this be achieved using this library ? Whilst we had no problems showing the credit card payment popup provided by this library, we couldn't see any UI for just entering and saving credit card details. Is this possible to do?

[jonasbark]

Use setup intents
https://www.google.com/search?q=setup+intents+payment+sheet&oq=setup+intents+payment+sheet

[SogoGolf]

hey @jonasbark thanks for quick reply. i think (not sure) there might be a problem with flutter_stripe but perhaps we are also not calling the API's in correct order. At the moment we keep getting an error Card detail is not complete. Can you let me know if what we are doing is correct ?

1. user taps button in Flutter (iOS) app (to proceed with recording their credit card on Stripe for future purchases)

2. we call a simple nodejs server app that returns customer id, client secret, ephemeral key and publishableKey. Here is the nodejs server side code:

  const customer = await stripe.customers.retrieve("xxxxxxxxxxx");

  const ephemeralKey = await stripe.ephemeralKeys.create(
    { customer: customer.id },
    { apiVersion: "2020-08-27" }
  );

  const setupIntent = await stripe.setupIntents.create({
    customer: customer.id,
    payment_method_types: ["card"],
  });
  res.json({
    clientSecret: setupIntent.client_secret,
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
    publishableKey:
      "pk_test_xxxxxxxxxxxx",
  });

This works fine and we have a response payload from the server to use. Now, back in the Flutter app ->

3. call Stripe.instance.initPaymentSheet. (Notice we are using a param called setupIntentClientSecret also, rather than paymentIntentClientSecret)

await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
      customerId: serverResponse!['customer'],
      customerEphemeralKeySecret: serverResponse!['ephemeralKey'],
      setupIntentClientSecret: serverResponse!['clientSecret'],
      style: ThemeMode.dark,
      merchantDisplayName: 'Test',
      allowsDelayedPaymentMethods: true,
    ));

4. display the payment sheet so user can enter their credit card deets

await Stripe.instance.presentPaymentSheet();

The app displays Stripe's payment collection popup, looks like this:

5. User taps on "Setup" button

6. now call Stripe.instance.confirmSetupIntent ; this is where i think we are wrong in how the APIs are being used ?

final setupIntentResult = await Stripe.instance.confirmSetupIntent(
      paymentIntentClientSecret: serverResponse!['clientSecret'],
      params: const PaymentMethodParams.card(
        paymentMethodData: PaymentMethodData(
          billingDetails: BillingDetails(.....snip),
          shippingDetails: ShippingDetails(...snip),
          ),
        ),
      ),
    );

ERROR ! This is where the error occurs. Here is error:

I still think we are not calling the API's correctly ? Or is this a bug with the flutter_stripe lib on iOS ?