Apple Pay and Google Pay do they work on Ionic?

wekas · May 19, 2019, 5:27am

I see there are a lot of old questions asking about apple pay and google pay with no real answers.
I need to see if its possible for potential project.
I see there is a cordova plugin for apple pay but it looks as if it may not work well with Ionic from some posts I have seen.

Has anyone every used this with Ionic or heard of this working?

Any help appreciated!

wekas · May 20, 2019, 11:57pm

It looks like there is no plugin for google play and google pay web is not supported for hybrid devices. It was pretty hard to find any information on this. I did see a reference to using BrainTree however could not find much on this.

Looks like this is something that would need to be done in a native Android app.

gokujy · December 9, 2019, 10:46am

Hello,
here some payment Integrations, we can use with ionic.

wekas · December 9, 2019, 9:17pm

Also the latest version of Stripe Checkout includes Apple Pay and Google Pay built in. Works great using fingerprint id.

travBrad · January 9, 2020, 4:28pm

Hey Wekas!

How did you get Stripe Checkout working in an Ionic app? I struggled with the success and failure URLs. Please could you share your implementation? Hugely appreciated brother!

cyrilfr · May 30, 2020, 1:08pm

I’d also love to know how you managed to have Google Pay working with Stripe Checkout in an Ionic app

wekas · July 1, 2020, 6:46pm

I actually ending up using Stripe Elements in my Ionic app. So I think I may have given up trying to get the success / failure urls to work. I remember I tried to use in app links as the urls but it would not accept them.

wekas · July 9, 2020, 8:35am

I had the idea to create a web page that the success redirects to as Stripe only seems to take http urls then use that web page to open a link the deep links back into the Ionic app.

Using Stripe Elements is a LOT more work as you have to handle all the SCA code and make the UI look nice. I still couldn’t get it looking as good as the check out. Plus it doesn’t work with Apple pay and Gpay as far as I can tell.

Give it a try and let me know if it works!

I haven’t used deeplinks to my own app yet.

wekas · April 17, 2021, 12:04am

Just to update this thread.

I got it working by using a success/failure url that linked to a webpage and then the webpage automatically redirected to the app using a deeplink (capacitor).
It worked ok… But it was not a very native experience as the Stripe checkout window opened in a new browser window.
So after spending all that time on it I ditched it and went back to Stripe elements.

I did not add apple pay but I need that now so if anyone knows how please let me know!

wekas · May 11, 2021, 8:17pm

I am just updating this thread with my research as there is very little information out there on using Apple Pay with Ionic and this may help someone.
I am using Ionic 5 / Capacitor / Stripe.

I am still in the researching phase so have not figured out how to do it from within the mobile app yet.

1. Preferred solution - by far the easiest - Does not work
https://stripe.com/docs/stripe-js/elements/payment-request-button
Issue:
However this may not work from inside an ionic app as requests from an iFrame or inAppBrowser are blocked by Stripe as Ionic uses a local urlScheme of capacitor:// not https://
https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-prerequisites
Possible workaround using Stripe V1:

Possible workaround?:
Capacitor - build cross platform apps with the web.
Change the local urlScheme to ionic://
Looks like this may not work:
Serve Ionic 5 Cordova application over HTTPS - Stack Overflow
bug: Setting iosScheme to http has no effect · Issue #2173 · ionic-team/capacitor · GitHub

Other possible workarounds:

Note: This does work from a web page outside of the ionic app. But if you do that you need to redirect back to the app using deeplinks from a web page. Not ideal and may not pass app store policy as payment is outside the app.

2. Capacitor community Stripe plugin (supports apple pay) - Have not tried

This looks like the most viable option.

3. Capacitor Apple Pay plugin - Have not tried

Still in development and only a few downloads, high risk

4. Cordova Apple Pay plugin - Does not work with latest iOS

This has not been updated in over 2 years and does not support later than iOS 12.

5. Ionic Apple Pay Enterprise
To expensive and not ready yet.

wekas · May 11, 2021, 10:48pm

I got it working!
Using: GitHub - capacitor-community/stripe: Stripe Mobile SDK wrapper for Capacitor

Docs here:

github.com

capacitor-community/stripe/blob/e197e835c897ace806c7564817e3cb79c06f51ed/.docs/pages/usage.md

# Usage Example


## Initializing the plugin
```ts
import { Plugins } from '@capacitor/core';

const { Stripe } = Plugins;

...

await Stripe.setPublishableKey('pk_test_....');
```

## Validating card information
```ts
const { valid } = await Stripe.validateCardNumber({ number: '424242424242' });
// valid: true

const { valid } = await Stripe.validateExpiryDate({ exp_month: 12, exp_year: 25 });

This file has been truncated. show original

Good thread here:

I will add the code later.

wekas · August 24, 2021, 10:54pm

Just to add to anyone looking at this that v1.1.0 of @capacitor-community/stripe does not support Stripe connect accounts and v3.0.3 does not support Apple Pay.

rahulraj1994 · April 12, 2022, 12:01pm

Hello wekas,
Hope you are doing good.

Actually, I am also supposed to do the google pay integration in an ionic mobile application in react using capacitor. I have installed the capacitor-community/stripe plugin and then run sync using following commands:

npm install @capacitor-community/stripe
and run sync

And then I used “CapacitorStripeProvider” to initialize the plugin like so:

import { CapacitorStripeProvider } from ‘@capacitor-community/stripe/dist/esm/react/provider’;

const App: React.FC = () => (
<CapacitorStripeProvider
publishableKey=“Your Publishable Key”
fallback={

Loading…

}

<IonApp>
...
</IonApp>

);

export default App;

And then, I followed the official docs of capacitor-community/stripe to implement the Google Pay functionality. I did everything mentioned there. Called different methods such as isGooglePayAvailable, createGooglePayAvailable and presentGooglePayAvailable.

There are several issues that I’m facing after running the code for GooglePay Integration.

1.) On certain android devices, I’m getting a message that says “Not implemented on device” being logged in the console window from the isGooglePayAvailable method even though I have Gpay app installed and logged in in my android device. On other devices, isGooglePayAvailable methods executes successfully and returns resolve: void response.

2.) Also, after having called presentGooglePay method, my android app crashes and I am returned to the home screen of my android device. Also, I am getting native Stripe.presentGooglePay being logged in the console window but I’m not able to see any “result Stripe.presentGooglePay” in the console window.

Also, I’m getting an error in the logcat of Android Studio that says:
Caused by: java.lang.IllegalStateException: presentForPaymentIntent() may only be called when Google Pay is available on this device.

I know all of this must have been quite confusing and cryptic as well to comprehend. So, it would be better if you could provide me your contact details (an email id or anything as such would do), so that I could better make my points clear and screen share to show you the code that I’ve used and the errors that I’m getting.

Thanks,
Rahul

wekas · April 12, 2022, 9:11pm

Hi @rahulraj1994 , I would log these issues here:

The developer is pretty responsive as it is still being worked on currently.

shreya-khandal07 · April 13, 2022, 3:08am

Hi Wekas,
I want to integrate googlepay to my mobile application using ionic and I have used capacitor-community/stripe as a module to implement it. On the implementation, my final googlepay pop window is displaying the emailId that has already saved in my mobile and also displaying the already saved mastercard but there is no amount or pay button is displaying in the pop-up window, the way it is showing in the github docs of community-capacitor/stripe.
In the below link of the screenshot which is given in the github of community-capacitor/stripe. You can see the amount and the pay button after the card information.

Screenshot for gpay mobile app

So, instead of getting this amount to pay and the pay button, my googlepay pop-up window is just displaying the “Continue” button and on clicking that button my application is crashing so can you please suggest me some methods or options which I can use to rectify this issue.

Thankyou!
~Shreya

ngochiencse · July 10, 2022, 4:19am

Thank you! You save my day

richardshergold · May 24, 2023, 1:36pm

Hi @wekas I just came across this thread after posting this I realise this us a long time after you were discussing payments but did you get Google Pay and Apple Pay working? What was your method in the end did you use Stripe Elements?

wekas · June 22, 2023, 9:27pm

@richardshergold No I have not spent a lot of time on this though.
I will be looking at it again in the coming months.
I believe the new Capacitor plugin supports this.

richardshergold · June 23, 2023, 6:29am

Hi. What plugin do you mean by the “new Capacitor one”? My problem is that I need to implement Google Pay and Apply Pay in the app but we don’t use Stripe as a payment mechanism - we use another 3rd party provider. Do you know if I will be able to use the Stripe Plugin to generate my encrypted token and then pass that onto my payment provider? I’m due to be looking into this next week.

ciccilleju · June 23, 2023, 7:37am

this GitHub - capacitor-community/stripe: Stripe Mobile SDK wrapper for Capacitor