Stripe Plugin - Javascript Modal Issue

Solar2D General Questions/Discussion
#1

Hi! I am using the Stripe plugin that Jason created and it works great. My only issue is with the javascript modal that pops up when you use the checkout() function. I don’t particularly like the idea of a popup checkout form (or the look of it), and I would prefer a full page form. It appears Stripe does have this option. I know I can create my own custom form by using newCharge and newToken but I don’t want to have go through all that effort for nothing. Is there a way to use the stripe checkout method without the modal popup?

Thanks!

#2

Hi David: I’m unaware of the non-js version. Can you send me a link with details? That might actually allow for Android support of stripe.checkout(). Let me know and I’ll look into it. Thanks!

#3

Hi! Thanks for your prompt response. I just realized something - that full page checkout only works when its on a mobile device. If you are testing it on a web browser it shows the popup. I guess that is the responsive design of it (which is great and it’s what I want), but it does not give me the responsive full page design on my mobile app. Still the popup. Any idea why?

https://stripe.com/checkout - scroll down and look at the section entitled “1-tap mobile payments”. See the photo next to it? It has a full page checkout. Click on the “Donate to Watsi” button on that page while on a mobile device (or in Chrome inspect mode and simulate a mobile device) and you will see this checkout page. 

It also says it should be compatible with Android.

Let me know your thoughts,

Thx!!

#4

Hi David,

Now that you mention it this is all ringing a bell - I assume that you are viewing on an Android mobile device, yes? Because the responsive design does adapt depending on the type of device - and unfortunately the Android version doesn’t play nice because it depends on opening the Checkout form in a new tab/window, and that won’t work right with an in-app webView.

To give some context, Stripe doesn’t actually give developers a clear-cut way to show just the checkout form. They provide an easy method for adding a checkout *button* for your webpage, and users must click on that button in order to open up the checkout form. Because in the context of an app using the plugin, that would mean clicking a button twice (ew), I developed a sneaky way of quickly rendering a webpage with a button, and then immediately “auto-clicking” that button to bring up the form. This works nicely on desktop and iOS, but not so nicely on Android, where the checkout form opens in a new tab.

I spent some time when I was developing the plugin to try and get this working on Android, but to no avail. I just think there’s not much I can do unfortunately - so I’m afraid that if you need Android support of stripe.checkout() or you want a full-screen checkout form, you’ll have to roll your own in Corona. Sorry I can’t be more help, but if you uncover something I’m missing let me know and I’ll take another swing.

Best,

Jason

#5

Sorry I forgot to mention I am using iOS (NOT Android) haha. My bad :stuck_out_tongue:

Should it still be the popup on iOS?

#6

Hi David,

I see what you mean. I get the same fullscreen version of the checkout form when I click the button on Stripe’s own Checkout site from an iPhone - but not when I use the plugin (which calls to the same checkout.stripe.com/checkout.js source) - I’m honestly stymied on this one. I’ll let you know if I come up with something clever, but I’m stumped at the moment…  :wacko:

#7

Though for some reason the fullscreen version insists on opening in a new tab in Safari, which could be part of the reason why you’re seeing the modal version on iOS - perhaps it can tell if the new tab was able to open and reverts to the modal otherwise? Or perhaps the webView doesn’t specifically identify itself as a mobile browser (?). Hm…

#8

ahah Okay thanks! It is indeed a weird one. Perhaps you need a button to take you to a new newWebView page that includes the form? It’s almost as if it’s not reading the correct CSS file or something. Very strange

#9

Check this forum out… https://groups.google.com/a/lists.stripe.com/forum/#!topic/api-discuss/nWxv-ysn0B8

#10

aah… stripe just responded to me (see below). Looks like it just simply won’t work for now. That’s a bummer. Would love a template on a custom stripe form for corona if anyone has one? 

=====

Hey there,

Thanks for writing in about this, I’m happy to help! Unfortunately, Checkout will always display that way when integrated in a Cordova/Corona application. There is no way to support the responsive version of Checkout as it requires support for pop-up window which won’t work reliably on those native app containers.

I would recommend that you instead use Stripe.js (https://stripe.com/docs/stripe.js) to build your own payment form to meet your own requirements.

I’m sorry I don’t have a better answer for you at the time but please do not hesitate to get back to me if you need help with anything else.

#11

Well, a bit disappointing but at least we have our answer - thanks for doing the investigative work David!

#12

Hi David: I’m unaware of the non-js version. Can you send me a link with details? That might actually allow for Android support of stripe.checkout(). Let me know and I’ll look into it. Thanks!

#13

Hi! Thanks for your prompt response. I just realized something - that full page checkout only works when its on a mobile device. If you are testing it on a web browser it shows the popup. I guess that is the responsive design of it (which is great and it’s what I want), but it does not give me the responsive full page design on my mobile app. Still the popup. Any idea why?

https://stripe.com/checkout - scroll down and look at the section entitled “1-tap mobile payments”. See the photo next to it? It has a full page checkout. Click on the “Donate to Watsi” button on that page while on a mobile device (or in Chrome inspect mode and simulate a mobile device) and you will see this checkout page. 

It also says it should be compatible with Android.

Let me know your thoughts,

Thx!!

#14

Hi David,

Now that you mention it this is all ringing a bell - I assume that you are viewing on an Android mobile device, yes? Because the responsive design does adapt depending on the type of device - and unfortunately the Android version doesn’t play nice because it depends on opening the Checkout form in a new tab/window, and that won’t work right with an in-app webView.

To give some context, Stripe doesn’t actually give developers a clear-cut way to show just the checkout form. They provide an easy method for adding a checkout *button* for your webpage, and users must click on that button in order to open up the checkout form. Because in the context of an app using the plugin, that would mean clicking a button twice (ew), I developed a sneaky way of quickly rendering a webpage with a button, and then immediately “auto-clicking” that button to bring up the form. This works nicely on desktop and iOS, but not so nicely on Android, where the checkout form opens in a new tab.

I spent some time when I was developing the plugin to try and get this working on Android, but to no avail. I just think there’s not much I can do unfortunately - so I’m afraid that if you need Android support of stripe.checkout() or you want a full-screen checkout form, you’ll have to roll your own in Corona. Sorry I can’t be more help, but if you uncover something I’m missing let me know and I’ll take another swing.

Best,

Jason

#15

Sorry I forgot to mention I am using iOS (NOT Android) haha. My bad :stuck_out_tongue:

Should it still be the popup on iOS?

#16

Hi David,

I see what you mean. I get the same fullscreen version of the checkout form when I click the button on Stripe’s own Checkout site from an iPhone - but not when I use the plugin (which calls to the same checkout.stripe.com/checkout.js source) - I’m honestly stymied on this one. I’ll let you know if I come up with something clever, but I’m stumped at the moment…  :wacko:

#17

Though for some reason the fullscreen version insists on opening in a new tab in Safari, which could be part of the reason why you’re seeing the modal version on iOS - perhaps it can tell if the new tab was able to open and reverts to the modal otherwise? Or perhaps the webView doesn’t specifically identify itself as a mobile browser (?). Hm…

#18

ahah Okay thanks! It is indeed a weird one. Perhaps you need a button to take you to a new newWebView page that includes the form? It’s almost as if it’s not reading the correct CSS file or something. Very strange

#19

Check this forum out… https://groups.google.com/a/lists.stripe.com/forum/#!topic/api-discuss/nWxv-ysn0B8

#20

aah… stripe just responded to me (see below). Looks like it just simply won’t work for now. That’s a bummer. Would love a template on a custom stripe form for corona if anyone has one? 

=====

Hey there,

Thanks for writing in about this, I’m happy to help! Unfortunately, Checkout will always display that way when integrated in a Cordova/Corona application. There is no way to support the responsive version of Checkout as it requires support for pop-up window which won’t work reliably on those native app containers.

I would recommend that you instead use Stripe.js (https://stripe.com/docs/stripe.js) to build your own payment form to meet your own requirements.

I’m sorry I don’t have a better answer for you at the time but please do not hesitate to get back to me if you need help with anything else.