apple pay and google pay support?

[arunim2405]

Hi, my current objective is to integrate apple pay and google pay into my app. It already supports card payment. Can I use this? Thank you for your help

[a-tokyo]

Hey @arunim2405, Welcome!

According to Stripe, No additional configuration is required to use Apple Pay in Checkout.

You need to configure the Stripe platform itself with your apple merchant data tho, Step by step article on how to configure stripe with apple merchant details (Check the How to use Stripe for Apple Pay payments) section.

As of this library, we simply open the web version of Stripe Checkout, so if you enable apple pay from stripe's API, it should work out of the box.

Let me know If I can help further!

Please reopen the issue if there's anything that needs to be implemented here 💪

[AnLuoRidge]

I failed to use your webview to call ApplePay either.

It seems on iOS, to make ApplePay available, we have to use an in-app-browser to open Stripe checkout page. It provides the context of Safari for using the ApplePay. If open a Stripe checkout webpage in an app's webview, it would not let you use the ApplePay.

[arunim2405]

Hi @AnLuoRidge ,
Were you able to test Google Pay on Android as well? As I am developing an application for an international client, I am unable to test these integrations myself. Also, were you able to find a fix for apple pay? Thanks!

[a-tokyo]

So, there's no apple pay support atm due to the context not being passed to the webview.

I will try to find a way around this soon! But it doesn't look like a straight forward fix.

P.S: PRs are welcome!

[AnLuoRidge]

Hi @AnLuoRidge ,
Were you able to test Google Pay on Android as well? As I am developing an application for an international client, I am unable to test these integrations myself. Also, were you able to find a fix for apple pay? Thanks!

No...I don't have a chance to test on Android. Nor do I have any idea of fixing it.

Hope @a-tokyo would find a workaround.

[a-tokyo]

@AnLuoRidge @arunim2405 The issue is mainly with react-native-webview, once it supports apple pay then this library should as well Issue for apple pay support in react-native-webview

Apple pay is available on webpages opened with SFSafariViewController, while react-native-webview uses WKWebView.

I found a workaround here react-native-webview/react-native-webview#920 (comment)

[AnLuoRidge]

Thank you @a-tokyo . The workaround is awesome!

[arunim2405]

@AnLuoRidge @a-tokyo ,
Thank you for the workaround @a-tokyo , can anyone please confirm if the workaround affects the onSuccess or onCancel functionality of the component? I have currently implemented react-native-inAppBrowser in my android app as a replacement but closing the window manually kind of ruins the experience for me. Thank You for all your help

[a-tokyo]

@arunim2405 They should not affect the onSuccess and onCancel as long as the URL is correct, the library relies on detecting URL changes to call functions

[AnLuoRidge]

@arunim2405 What a coincidence!!! I met the problem of onSuccess and onCancel not being called as well. They worked perfectly yesterday. But suddenly not working today.

However, not like you, I'm still using react-native-stripe-checkout-webview directly.

That's really weird. I even, in this package's source code, wrote some console.log in the _onLoadStart to test, but no output.

I'll build a new expo project tmr to dig out what's the root cause.

[a-tokyo]

@arunim2405, @AnLuoRidge I suspect the following:

The syntheticEvent schema has changed, react-native-stripe-checkout checks for syntheticEvent.nativeEvent.url , if the object structure is different it would not call the resolvers.

We can check the new schema and add an additional check here https://github.com/A-Tokyo/react-native-stripe-checkout-webview/blob/449f622ce907967fcf848cc9ef80bd4895ff156a/src/StripeCheckout.js#L76

[arunim2405]

"dont use any script injections e.g. onMessage, injectedJavaScript cause they use WKUserScript for injection in webpage and disables Apple Pay. But u'll have question how to communicate between webview and app - if u need apple pay in most cases u are integrating 3rd party checkout(e.g. stripe) -> all u need "close" webview on success or fail -> many checkout providers have "callback urls" e.g. stripe have success_url, just use it, redirect user back into your app on success/fail via deep link"
This was a point given in the work around . Are onLoadStart and onLoadEnd injected in the webpage? Because that might disable apple pay

[AnLuoRidge]

@arunim2405, @AnLuoRidge I suspect the following:

The syntheticEvent schema has changed, react-native-stripe-checkout checks for syntheticEvent.nativeEvent.url , if the object structure is different it would not call the resolvers.

We can check the new schema and add an additional check here

https://github.com/A-Tokyo/react-native-stripe-checkout-webview/blob/449f622ce907967fcf848cc9ef80bd4895ff156a/src/StripeCheckout.js#L76

Yes, I read this part of source code today. While...I wrote my console.log at the first line of _onLoadStart, and just output 'load start'. But failed. So, there's nothing to do with the syntheticEvent.

That drove me crazy. I'll examine what could be wrong tomorrow.

[a-tokyo]

@arunim2405 no the handler functions are not injected in the page, we just listen to URL changes

[a-tokyo]

@AnLuoRidge That sure is weird!

We just need to detect the URL string somehow!

[arunim2405]

Update, I finally got hands on a testing ios device with apple pay sandbox. Implemented the workaround stated above and I am pleased to share with you guys that apple pay is working as expected. onSuccess and onCancel is also working as expected. I just need a method to test out google pay. @AnLuoRidge @a-tokyo

[a-tokyo]

@arunim2405 Great! Awesome job!

@arunim2405 @AnLuoRidge Do you think we add the tempfix to the documentation? Or should we fork the webview repo and use it?

[AnLuoRidge]

@AnLuoRidge That sure is weird!

We just need to detect the URL string somehow!

Now I know. It's the http url in SuccessUrl/CancelUrl makes the webview fail to call _onLoadStart.

@arunim2405 Great! Awesome job!

@arunim2405 @AnLuoRidge Do you think we add the tempfix to the documentation? Or should we fork the webview repo and use it?

I think add this temp fix in the README is enough.

[a-tokyo]

@AnLuoRidge @arunim2405 Here's a PR with the documentation #12 , let me know if you have any proposed changes!

[NeOMakinG]

@arunim2405 @AnLuoRidge Do you think we add the tempfix to the documentation? Or should we fork the webview repo and use it?

Trust me, forking it could cause side issues, My opinion : create an issue and wait for it is the right solution!

[akhilsanker]

@arunim2405 , @a-tokyo ,

Google pay is not working in android device. I have tried react-native-webview/react-native-webview#920 (comment) this solution but no effect in android.

Stripe preview is working well in chrome with in the same android device. Is there anything I am missing, even from Stripe dashboard.

Please find my code below:

<StripeCheckout
stripePublicKey={STRIPE_PUBLISH_KEY.PUBLISH_KEY}
checkoutSessionInput={{
  sessionId: checkoutId
}}
onSuccess={() => {
  paymentSuccess();
}}
onCancel={() => {
  navigation.goBack();
}}
options={{
  htmlContentLoading: '',
  htmlContentHead: ''
}}
renderOnComplete={() => <></>}
onNavigationStateChange={() => {
  setIsPaymentSuccess(true);
}}
/>

Versions using:
react-native: 0.64.0
react-native-webview: 11.0.3
react-native-stripe-checkout-webview": 0.0.12,

Thanks