Migrating to Payment Intents

[javiertrillo]

Hello,

I would like to know is you are going to include the Stripe migration to payment intents in this plugin.
I am using this plugin in some projects and I have to update my project to new Stripe Payment flow.

I have to decide if still using this plugin or use the javascript native library.

[ihadeed]

Hi @javiertrillo

Yes we will include Payment Intents, however there's no guarantee on when it will be ready and published.

If you need something to use today, I suggest you go with the JavaScript library.

The only benefit this library gives you is the ability to use features like Google Pay and Apple Pay.

Other features that aren't required by the Payment Intent flow will most likely be dropped from this library.

The native library isn't doing anything special, other than adding tons of telemetry calls that cannot be disabled by a configuration. We prefer to use a tiny HTTP client library (JS based) to make calls directly to the API instead.

[javiertrillo]

Hello @ihadeed ,

Thanks four your reply. I have to do the migration to payment intents before the 14th of September, is the Stripe limit day.

So I think im going to use the Javascript library for a fast integration.

[sagar6899]

Hello @javiertrillo ,
I am also facing the same issue, I am not able to find any ionic-stripe plugin update yet for SCA.
So can you please share your javascript code how to deal with this.

[javiertrillo]

Hello @sagar6899
Finally, I have used the stripe.js library.

I have follow this documentation: https://stripe.com/docs/payments/payment-intents/migration/automatic-confirmation#api-version, it's very clear.

And this doc about integrate stripe.js and ionic: https://baadiersydow.com/integrate-ionic-framework-stripe-single-recurring-payments/

[dilanfdo]

Hello @javiertrillo i am also trying to implement this in my ionic 3 app. Can we do all the steps in the app itself without contacting or help of the server? Can you please share some code how to implement this. Thanks in advance.

[ihadeed]

@dilanfdo

You can, but it's not secure. Some calls require your secret key, which shouldn't be published in the client-side app and should be handled with care even on the server-side.

If you don't have a server and want a minimal solution, deploy a serverless function on a FaaS provider (Firebase/Google Cloud functions, AWS Lambda...etc) that can handle any server-side functionality you need.

[dilanfdo]

@ihadeed

Thanks for your reply. No, there is team who handles the server side(backend). So i can get the help from them to perform the server side tasks. To be more clear can you verify if the following steps are correct

• Register your intent to collect payment on the server side (server sends the intent secret)
• Collect payment details on the client side (call stripe.handleCardPayment with the intent secret and the card element)
• Initiate creation of the payment (according to the documentation its completed in the previous step)
• Fulfill the customer’s order on the server side

I am referring this document https://stripe.com/docs/payments/payment-intents/migration/automatic-confirmation#web

So at what point the 3D secure modal pop up appears in the app?

Also will this be handled in the plugin in the near future?

[ihadeed]

@dilanfdo

You can tell which steps require secret key by looking at the API key they use in the example. If it starts with sk_ that's the secret key.

The steps you have outlined seem correct.

So at what point the 3D secure modal pop up appears in the app?

The 3D secure modal is an additional verification to further ensure that the user is the card holder and they're authorized to make that purchase; which helps collect more proof of authorization and reduce fraud.

Also will this be handled in the plugin in the near future?

The new version will focus on features that (1) are only available on the mobile SDKs, (2) are available on Stripe.js but aren't supported in Cordova or all browsers (Apple/Google pay), or (3) offer native mobile UI components (3DS authentication).

Payment Intents are included since they use 3DS for authentication.

[dilanfdo]

@ihadeed

Thanks for the clarification. Looking forward to using the latest release of the plugin :)

[CodeWithOz]

@javiertrillo did you have to worry about HTTPS when using Stripe.js for payment intents? Stripe's docs say that you can only use PaymentIntents over HTTPS.

Also, did you integrate Apple Pay and/or Google Pay with the PaymentIntents?

[danroot]

Same question as @CodeWithOz - Stripe.js give a warning that HTTPS is required for production use. Since the ionic app is running on ionic:// or http://localhost or capacitor:// , my understanding is that stripe.js cannot be used from a cordova or capacitor app in production use. Can someone confirm or correct me on that? I'm also looking at how to support 3d secure using cordova-plugin-stripe.

[graemeenglish]

@danroot I ended up using stripe.js to target web and a custom implementation of this plugin to cover android and ios for the reason you mention (along with apple/google pay support which also wouldn't be possible for native using stripe.js I believe)

[jackbayliss]

@danroot Stripe.js didn't work for me, purely because due to SCA (EU thing) we needed to use Payment Intents which only works with HTTPS. I couldn't find a way around the HTTPS error so what I did was make a custom cordova plugin that uses the Stripe SDK itself this allows for 3D security and payment intents.

[CodeWithOz]

@graemeenglish @jackbayliss could either of you please share the modified code you used? So the rest of us don’t have to reinvent the wheel 🙂.

[jackbayliss]

@CodeWithOz You can find my Android implementation here :
https://github.com/jackbayliss/cordova-plugin-stripe-intent

[danroot]

For now we've settled on in-app-browser and a page on the website that uses Stripe.js. We style the page so that it fits with the mobile app and handle payment success/cancel gracefully. Could just as easily popup Checkout page.

I did contact Stripe support to be sure there weren't any other options. They were very helpful, but mostly confirmed above. We've moved to Capacitor, so may at some point look at building a Capacitor plugin that's 1:1 with the Stripe iOS and Android SDKs. Best case IMO would be for stripe to create and support an official plugin, since they could best ensure full compatibility and upgrade as their API changes. If you're interested in that, consider emailing their support to register your vote. ;)

[jackbayliss]

@danroot Funnily enough I'm currently going down this route myself for the iOS version after spending too long trying. I agree it should be something Stripe should handle- as they'll know what's best.

For those that come here and are having the same issues. I'd do what @danroot suggests and use the In App Browser in conjunction with a similarly styled web page. You can then run a check on close of the browser, or perhaps on receiving a message.

[danroot]

... or Capacitor In App Browser if you're using Capacitor.

[iamenrique]

I consider the @jackbayliss approach the most mantainable. I'm starting right now to work on that. :)

[Mapiac]

@enriqued93 did you get it going on iOS? Is it the iOS SDK you are trying to use? What were the trouble spots. Thanks

[iamenriqueiks]

Hi @Mapiac it's me (the same, one and only @enriqued93). First of all, sorry for the super late response, I've been on a rush since then.

Indeed, I could make it work in iOS (Ionic 5 + Capacitor + Stripe). Basically, the approach is to use Stripe's iOS SDK to create/select the payment method, create the PaymentIntent server-side and come back to trigger the payment from iOS.

First, choose a payment method. You can rely on the ViewController they provide for that purpose (I don't mention all the process of generating the ephemeral key, the payment context and so on, but it's implicit that you must accomplish it).

Capacitor would be a bridge to trigger that ViewController and wait/pass the selected/created payment method ID only. It's really important, keep in mind you're not granted to touch/take/store any of the user's data i.e. card number, name, etc. If you use their ViewController you're safe though :)

Ionic would receive only the payment method ID, of course. Then, pass it to my backend along with the order detail (that's up to your business logic). Your server, which has you Secret key, can perform an authenticated PaymentIntent.create to not just create a payment intent but bind it to a specific customer and a payment method as well (clearly the Stripe customer was created before and it's ID is stored in my database bound to the respective User record). My backend returns the payment intent's client secret (provided by Stripe API) back to Ionic, Ionic moves directly to iOS through Capacitor.

Finally, with iOS SDK just confirm the payment and throw the completion status back to Capacitor to display a nice "Successful payment" message! Don't forget to handle non-success responses properly e.g. retry with another payment method or dismiss the whole order including the payment intent (which would be in a pending status).

[stefanotauriello]

For now we've settled on in-app-browser and a page on the website that uses Stripe.js. We style the page so that it fits with the mobile app and handle payment success/cancel gracefully. Could just as easily popup Checkout page.

I did contact Stripe support to be sure there weren't any other options. They were very helpful, but mostly confirmed above. We've moved to Capacitor, so may at some point look at building a Capacitor plugin that's 1:1 with the Stripe iOS and Android SDKs. Best case IMO would be for stripe to create and support an official plugin, since they could best ensure full compatibility and upgrade as their API changes. If you're interested in that, consider emailing their support to register your vote. ;)

Is it compatible with Play Store and Apple Store guidelines? If I use iframe instead of In App Browser?