Gerald - Redfluencer | Stripe Developers | Page 1

fallow flameBOT Oct 25, 2022, 8:21 AM

#

orchid badger Oct 25, 2022, 8:22 AM

#

Hi there,
Could you please give more details about your use case and what are you trying to account?
Are you using PaymentIntent or SetupIntent ?

merry geyser Oct 25, 2022, 8:23 AM

#

Hi, im using setup intent. I want to save the user card details for later use

#

This is my backend codes

  const stripe = require("stripe")(
    "sk_test_51LjLfwLLeb1xbCSQHQq33bheOppk3aULL3oER9ZEpAQKkgz4gzlCDNwR2OCGjqS6vamJpBlLJ1VTawQB1imhCfUC0024JVrV5F"
  );

  const customer = await stripe.customers.create();
  const ephemeralKey = await stripe.ephemeralKeys.create(
    { customer: customer.id },
    { apiVersion: "2022-08-01" }
  );
  const setupIntent = await stripe.setupIntents.create({
    customer: customer.id,
  });
  res.json({
    setupIntent: setupIntent.client_secret,
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
  });
});```

#

this is my frontencodes

  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/setup`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { setupIntent, ephemeralKey, customer } = await response.json();

    return {
      setupIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const { setupIntent, ephemeralKey, customer } =
      await fetchPaymentSheetParams();
    console.log(setupIntent, ephemeralKey, customer);
    const { error } = await initPaymentSheet({
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      setupIntentClientSecret: setupIntent,
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert(
        "Success",
        "Your payment method is successfully set up for future payments!"
      );
    }
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <StripeProvider publishableKey="pk_test_51LjLfwLLeb1xbCSQyrBCUMuDh8mE6OKvmt1gVza8Iu7fqd1iLDVCwLdwi4LVn4R547iC6o80yyg45LSxTiOhEhhZ00EXBjPgaz">
      <SafeAreaView style={styles.container}>
        <Button
          variant="primary"
          // disabled={!loading}
          title="Set up"
          onPress={openPaymentSheet}
        />
      </SafeAreaView>
    </StripeProvider>
  );
};```

#

i followed exactly what was documented. It returned setupIntent, ephemeralKey, customer but theres no intent

orchid badger Oct 25, 2022, 8:25 AM

#

Just to confirm you are following this guide ?
https://stripe.com/docs/payments/save-and-reuse?platform=web

merry geyser Oct 25, 2022, 8:25 AM

#

yes but the react native one https://stripe.com/docs/payments/save-and-reuse?platform=react-native&ui=payment-sheet

Set up future payments

Learn how to save card details and charge your customers later.

#

hi @orchid badger any idea?

orchid badger Oct 25, 2022, 8:32 AM

#

Yes, when creating the SetupIntent you are passing a customerId, when confirming the SetupIntent the resulting PaymentMethod, will be attached to that customer

#

You need to fetch the customer's PaymentMethods, in your backend:

const paymentMethods = await stripe.paymentMethods.list({
  customer: '{{CUSTOMER_ID}}',
  type: 'card',
});

And use it for future payments

#

You need to continue following the guide:
https://stripe.com/docs/payments/save-and-reuse?platform=react-native&ui=payment-sheet#charge-saved-payment-method

#

Also another option, is to fetch the SetupIntent (from its Id) and refer to the property payment_method:
https://stripe.com/docs/api/setup_intents/object#setup_intent_object-payment_method
That's is the resulting PaymentMethod Id, use it to charge the customer with the same way

merry geyser Oct 25, 2022, 8:35 AM

#

@orchid badger I think you got it wrong. The thing is that there is no intent popping up for me to save my card details

#

its not retrieving my card details. there is no pop up modal for me to input my card details

orchid badger Oct 25, 2022, 8:37 AM

#

Ah sorry, I mis understood so, you mean the mobile app is not showing the PaymentSheet popup ?

merry geyser Oct 25, 2022, 8:37 AM

#

yes

#

its not showing

orchid badger Oct 25, 2022, 8:38 AM

#

At runtime, your app is reaching this method openPaymentSheet or not ? if yes did you added some logs to debug the functions call ?
like what is the response of this const { error } = await presentPaymentSheet(); ?

merry geyser Oct 25, 2022, 8:38 AM

#

no error

#

it returned setupIntent, ephemeralKey, customer

orchid badger Oct 25, 2022, 8:44 AM

#

the fetchPaymentSheetParams function is the one returning the setupIntent, ephemeralKey, customer. But I'm talking about openPaymentSheet and presentPaymentSheet functions in your code

merry geyser Oct 25, 2022, 8:47 AM

#

yes it does

#

working absolutely fine

#

but the intent is not coming up

orchid badger Oct 25, 2022, 8:50 AM

#

If openPaymentSheet is working fine, then you should have a response for const { error } = await presentPaymentSheet();
what is the value of the error here ?

#

Are you having the popup?

Alert.alert(
        "Success",
        "Your payment method is successfully set up for future payments!"
      );

merry geyser Oct 25, 2022, 8:53 AM

#

nope after pressing the button

#

nothing comes up

orchid badger Oct 25, 2022, 8:56 AM

#

Did you add some logs in the openPaymentSheet function ?

merry geyser Oct 25, 2022, 8:56 AM

#

yes

#

everything is fine but nothing comes up

#

no error no nothing

orchid badger Oct 25, 2022, 9:00 AM

#

in openPaymentSheet if there is no exception in your react native console app, then one of these two alerts must popup:

if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert(
        "Success",
        "Your payment method is successfully set up for future payments!"
      );
    }

merry geyser Oct 25, 2022, 9:01 AM

#

before this

#

this is no intent at all

#


    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert(
        "Success",
        "Your payment method is successfully set up for future payments!"
      );
    }```

#

in btween await presentPaymentSheet() and if(error)

#

nothing happends

orchid badger Oct 25, 2022, 9:02 AM

#

Yeah there is no intent, you justshow the PaymentSheet const { error } = await presentPaymentSheet();

merry geyser Oct 25, 2022, 9:02 AM

#

thats the problem im facing

#

yes

orchid badger Oct 25, 2022, 9:03 AM

#

That mean either the presentPaymentSheet is not called, or there is an expection thrown

merry geyser Oct 25, 2022, 9:03 AM

#

there should be a pop up right?

orchid badger Oct 25, 2022, 9:03 AM

#

merry geyser there should be a pop up right?

yes

orchid badger Oct 25, 2022, 9:03 AM

#

orchid badger That mean either the presentPaymentSheet is not called, or there is an expection...

Check your react native console

#

otherwise, You can refer to this working project:
https://github.com/stripe/stripe-react-native/tree/master/example
You can test this page, which works with the same logic as yours
https://github.com/stripe/stripe-react-native/blob/master/example/src/screens/PaymentSheetWithSetupIntent.tsx

merry geyser Oct 25, 2022, 9:05 AM

#

hi @orchid badger I have checked the codes

#

they are the same

#

I still do not understand why there's no popup

#

could we do a video call?

orchid badger Oct 25, 2022, 9:12 AM

#

Sorry we can't do a video call, I invite you to run the sample example and see how the popup is shown

tall imp Oct 25, 2022, 9:16 AM

#

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!

#Gerald - Redfluencer