stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.26k stars 259 forks source link

Payment options are not shown in PaymentSheet on ios #829

Closed Sascha1251 closed 2 years ago

Sascha1251 commented 2 years ago

Describe the bug When I allow multiple payment types (e.g. 'bancontact', 'card', 'ideal') when creating the payment intent and open the payment sheet on an android device, I can see all three payment options. However, when I open the same application on an iPhone, only the card input fields are available and I can't select any other payment option.

I'm using expo with the @stripe/stripe-react-native 0.3.0

To Reproduce

Code on the server:

const paymentIntent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: "eur",
    payment_method_types: ['bancontact', 'card', 'ideal'],
});

Expected behavior To see the three provided payment option in the payment sheet on iOS as well

Screenshots Added a screenshot from the android and from the ios device android ios

Smartphone (please complete the following information):

charliecruzan-stripe commented 2 years ago
Screen Shot 2022-02-24 at 3 25 24 PM

It's working for me using this code from the example server:

  const paymentIntent = await stripe.paymentIntents.create({
    amount: 5099,
    currency: 'eur',
    customer: customer.id,
    shipping: {
      name: 'Jane Doe',
      address: {
        state: 'Texas',
        city: 'Houston',
        line1: '1459  Circle Drive',
        postal_code: '77063',
        country: 'US',
      },
    },
    payment_method_types: [
      'card',
      'ideal',
      'sepa_debit',
      'sofort',
      'bancontact',
      'p24',
      'giropay',
      'eps',
    ],
  });

That's because some of those payment methods require shipping be attached to the customer maybe.

Sascha1251 commented 2 years ago

Hey @charliecruzan-stripe, I tried it with the same code you provided and it doesn't work. Even more interesting, on android, I can still only see "Card", "Bancontact" and "iDEAL".

I've created a sample application, please see https://github.com/Sascha1251/expoStripe In the PaymentScreen.tsx I'm initializing stripe and handling the deep linking.  In the PaymentsUICompleteScreen.tsx I'm getting the client secret from the payment intent that is being created on the server and opening the payment sheet. This is using a remix of the expo stripe server example (https://glitch.com/edit/#!/expo-stripe-server-example), so that I can edit the environment variables and add our test mode public and secret keys: https://glitch.com/edit/#!/evanescent-cooked-tumble  The only thing that I've changed is in Line #443, when creating the payment intent, I've added multiple "payment_method_types". All of those are enabled in our test mode account. The payment_method_types I've provided are: ['card',  'ideal', 'sepa_debit', 'sofort',  'bancontact', 'p24', 'giropay',  'eps' ]. I also tried adding the shipment from above, however, it didn't change the result.

Could you please have a look and let me know, if I have a misunderstanding how this should work?

charliecruzan-stripe commented 2 years ago

This might have to do with the fact that you're using Expo. The version of stripe supported in expo SDK 44 is 0.2.3, yet you have 0.3.0 installed. Could you try your same code in the bare workflow and let me know how that goes?

Sascha1251 commented 2 years ago

I just tested it in the bare workflow and there it's working fine when installing the application directly on the device. When using the Expo client, it wasn't working. Does that mean that the payment sheet doesn't support all payment options in the managed workflow? Is this a know limitation?

charliecruzan-stripe commented 2 years ago

Older versions of stripe-react-native (which Expo is currently relying on in its SDK) don't have all the payment methods included in newer versions, since we upgrade the underlying native stripe-ios and stripe-android libraries with almost each release.

For example, in release 0.2.3 we updated:

stripe-android 19.1.0 This release enables new payment methods in the Mobile Payment Element: Eps, Giropay, P24, Klarna, PayPal, AfterpayClearpay.

stripe-ios 21.11.0 [Added] PaymentSheet now supports Afterpay / Clearpay, EPS, Giropay, Klarna, Paypal (private beta), and P24.

So this difference is expected

gauravag23 commented 2 years ago

You can check color scheme and set cardStyle={{backgroundColor: Appearance.getColorScheme() == 'dark' ? '#000000':'#ffffff'}}as per light or dark theme.

faisalhotak commented 9 months ago

Hello ! Any updates about the payment options not shown in PaymentSheet on iOS ?

I do not have the Bancontact payment method, I'm using expo 49.0.9 with @stripe/stripe-react-native 0.28.0.

Is there any way that I could activate this Bancontact payment option ? Maybe another module than PaymentSheet ?