Stripe's mobile view does not show pop-up

[Brian Park]

Hello

I'm using Stripe's simple Checkout feature. I've noticed that when I view my site on mobile (non-native), the Checkout does not have the cool looking pop-up (javascript?) like it does on desktop. Is this normal? If so, how can I access this page so I can style it so it looks consistent with the rest of my site. 

Any help is greatly appreciated!

Brian

[Matt DuVall]

Hi Brian,

I'd be happy to help! So what you're seeing on non-native mobile (ie Safari on iOS7) is the expected UI, it should open another tab and look something like this:

If that's not what you're seeing, please let me know. We recently pushed a temporary patch to iOS 8 for Checkout that shows an embedded pop-up instead of this UI in Safari.

To answer your second question: unfortunately we don't allow users to inject stylesheets into the UI, however you can upload your logo and use the `data-image` attribute on the script to add your branding to Checkout.

Hope that helps,

Matt

[Brian Park]

Matt

Thanks for the response. I am not showing that. Instead here's what I show. Also I'm NOT using ios8. 

Any further thoughts?

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[Matt DuVall]

Hey Brian,

Ah yes, that's our fallback rendering for Checkout when the iOS version is below 6. The majority of your customers will see the UI I added above and a small percentage will be the fallback UI (for an iOS reference point here are Apple's numbers as of 9/2014: https://developer.apple.com/support/appstore/).

Cheers,

Matt

[Brian Park]

Ah! I see...that helped. Now I can get on with my life. Thank you Matt!

[Gabriel Anglada]

Hi Matt!

   Is it possible to force showing popup in all devices? My designed flow needs to receive callback from popup.

Thanks!

[Matthew Arkin]

You should always get a call back with a token whether it was a popup or the mobile view 

—
Sent from Mailbox

[Gabriel Anglada]

When stripe tab is closed once I've press to Pay button, the app tab is shown but any call is done and any token is received. I've test it on an iPhone 5 (8.1.3) and in a Samsung Galaxy Tab (4.1.2). The point is that in my iPad 3 (8.1.4), the flow is similar (a new tab is opened for stripe checkout, with a different layout), but the callback is called in my app...

[James Reggio]

Hello Gabriel,

Is it the `closed` or the `token` callback that you're not receiving? Which of the phones you listed is failing?

If you're comfortable sharing a link to your integration, I'd be happy to take a look.

James

[Gabriel Anglada]

Hi James, devices not working are iPhone and Samsung. In iPad is wroking well.

Of course, those are the steps to test it:

1 - go to http://test-showea.testabit.com/#/login and login with this credentials (strip...@mail.com / pass:1111)

2 - go to http://test-showea.testabit.com/#/products/9 and click to "Añadir al carrito". Automatically goes to http://test-showea.testabit.com/#/shopping-cart

3 - In the shopping cart, select a shipping option and click on "Pagar" button. 

Then, stripe flow starts.

IMPORTANT: note that angular is used as client side to manage stripe callback

Many thanks! Let me know if you need some help

[Sam Ritchie]

I'm guessing this might be related to Stripe's requirement that the modal be launched directly from the click handler, not in a nested callback. I tried to use a local pubsub system initially to implement Stripe Checkout, but it would fail on mobile devices. Launching it directly from "on-click" worked great.

Gabriel Anglada

March 31, 2015 at 10:40 PM

Hi James, devices not working are iPhone and Samsung. In iPad is wroking well.

Of course, those are the steps to test it:

1 - go to http://test-showea.testabit.com/#/login and login with this credentials (strip...@mail.com / pass:1111)

2 - go to http://test-showea.testabit.com/#/products/9 and click to "Añadir al carrito". Automatically goes to http://test-showea.testabit.com/#/shopping-cart

3 - In the shopping cart, select a shipping option and click on "Pagar" button. 

Then, stripe flow starts.

IMPORTANT: note that angular is used as client side to manage stripe callback

Many thanks! Let me know if you need some help

El martes, 31 de marzo de 2015, 23:57:30 (UTC+2), James Reggio escribió:

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

James Reggio

March 31, 2015 at 3:57 PM

Hello Gabriel,

Is it the `closed` or the `token` callback that you're not receiving? Which of the phones you listed is failing?

If you're comfortable sharing a link to your integration, I'd be happy to take a look.

James

On Tuesday, March 31, 2015 at 6:30:46 AM UTC-7, Gabriel Anglada wrote:

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

Gabriel Anglada

March 31, 2015 at 7:30 AM

When stripe tab is closed once I've press to Pay button, the app tab is shown but any call is done and any token is received. I've test it on an iPhone 5 (8.1.3) and in a Samsung Galaxy Tab (4.1.2). The point is that in my iPad 3 (8.1.4), the flow is similar (a new tab is opened for stripe checkout, with a different layout), but the callback is called in my app...

El martes, 31 de marzo de 2015, 14:31:58 (UTC+2), Matthew Arkin escribió:

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

Matthew Arkin

March 31, 2015 at 6:31 AM

You should always get a call back with a token whether it was a popup or the mobile view 

—
Sent from Mailbox

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

Gabriel Anglada

March 31, 2015 at 4:53 AM

Hi Matt!

   Is it possible to force showing popup in all devices? My designed flow needs to receive callback from popup.

Thanks!

El martes, 23 de septiembre de 2014, 20:09:29 (UTC+2), Brian Park escribió:

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at http://groups.google.com/a/lists.stripe.com/group/api-discuss/.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

--
Sam Ritchie (@sritchie)

Paddleguru Co-Founder
703.863.8561
www.paddleguru.com
Twitter // Facebook

[Matthew Arkin]

This isn't a Stripe requirement but instead a requirement of how mobile browsers deal with unwanted pop-ups 

Sent from Outlook

[James Reggio]

Thanks for the extra information, Gabriel.

First, I do want to acknowledge that Matthew and Sam are correct: for the best experience, Checkout needs to be invoked in an event handler (like `click`) to bypass the browser's pop-up blocker. As Matthew said, this isn't a limitation specific to Stripe; it's a general browser limitation.

That said, I looked at your code, Gabriel, and saw that you're invoking Checkout inside of a `click` handler, so that is all correct.

The problem here is subtle. On desktop computers, Checkout will fire the `token` callback before the `closed` callback, which your `StripeHandlerProxy` depends upon to either `resolve` or `reject` the promise. However, on mobile phones, Checkout will fire the `closed` callback *before* the `token` callback, which is causing your promise to be prematurely rejected.

We don't guarantee the ordering of these callbacks in our documentation; however, it's not good that the behavior is different between platforms, so this is something we shall fix as soon as possible. While you're waiting for that fix to be deployed (I expect it will go out by the end of the week), you could put the contents of your `options.closed` function into a timeout—I'd recommend 500ms. You'll need to be sure to set `success = true` inside the `options.token` function for this to work correctly (I think this is just an oversight in your code right now).

Sorry about the problem, and for how long it took us to get to the bottom of it. I'll reply again when the fix for the callback ordering has made it into production.

Best regards,

James

--
You received this message because you are subscribed to a topic in the Google Groups "Stripe API Discussion" group.

[Gabriel Anglada]

Hi All, thanks for all answers, specially to James.

   Actually I can wait for the fix and I will be waiting to your reply.

Again, many thanks for you attention!

[James Reggio]

Hello again, Gabriel.

We deployed our changes today, so the `token` callback should fire before the `closed` callback on all platforms now.

Please try it out and let me know if you have any further problems.

Best,

James

[Gabriel Anglada]

Hi James, seems it works! At least on Iphone, where it didn't work before. When I try on an Android mobile I will let you know.

Many thanks man!

[James Reggio]

Happy to help. Let me know if you have any further trouble.