Expo React Native iOS Payment Options not shown (only card shown)

[faisalhotak]

Hello everyone!

I have implemented the stripe payment inside my mobile app. It works fine but payment cards options are only shown on Android and only "card" option is shown on iOS (they use the same stripe public key so they should show the same card options as the ones activated in my dashboard). The most important payment option being "bancontact" and I do not see it on iOS.

To Reproduce Steps to reproduce the behavior:

1. Creating the payment intent
2. Showing the payment intent element to the user
3. All the options are available on Android
4. No card options available on iOS (except the "card")

Server side :

const paymentIntent = await stripe.paymentIntents.create({
    amount,
    customer: customer.id,
    currency: "eur",
    automatic_payment_methods: {
        enabled: true,
    },
    metadata: { pendingPaymentId: pendingPayment.id },
  });

Client side :

const initializePaymentSheet = async () => {
    const { payload } = await createPaymentIntent();

    console.log("payload", payload);

    const { clientSecret, ephemeralKey, customerId, publishableKey } = payload;

    const { error } = await initPaymentSheet({
      merchantDisplayName: "TEST APP",
      customerId: customerId,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: clientSecret,
      merchantCountryCode: "BE",
    });

    if (error) {
      console.log(error);
    }
  };

  const payTest = async () => {
    await initializePaymentSheet();
    // const response = await confirmPaymentSheetPayment();
    const { error } = await presentPaymentSheet();

    console.log("error", error);

    if (error) {
      Toast.show(error.message, {
        duration: Toast.durations.SHORT,
        position: Toast.positions.CENTER,
        animation: true,
        delay: 0,
      });

      return;
    }

    Toast.show("Paiement effectué", {
      duration: Toast.durations.SHORT,
      position: Toast.positions.CENTER,
      animation: true,
      delay: 0,
    });
  };

Screenshots

On Android (showing all the options) :

On iOS (only showing "card" and not other options such as "bancontact" or others") :

Smartphone :

• Device: iPhone 15 Pro
• OS: 17.0.1
  • Expo React Native managed application Using :

    "expo": "^49.0.9",
    "@stripe/stripe-react-native": "0.28.0"

Thanks !

[oaxio]

Same issue here

[oaxio]

For anyone with this issue,

Add
returnURL: 'your-app://stripe-redirect', in your initPaymentSheet

[faisalhotak]

@oaxio Thank you very much!

Indeed, the return url is needed, make sure to replace 'your-app' by your app name.

const { error } = await initPaymentSheet({
      merchantDisplayName: "TEST APP",
      customerId: customerId,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: clientSecret,
      merchantCountryCode: "BE",
      returnURL: 'your-app://stripe-redirect'
    });

Then the payment methods will be shown !