Why does that Save button appear when using Stripe Checkout on mobile device

What we can do to avoid first button “SAVE” appear when i click on checkout button instead of open the pop up of the check out with stripe plugin?
This happen on native apps.
I attached screenshots.

1 Like

Bumping up this old question.
Its really annoying. Anyone know how to avoid this?

1 Like

@emmanuel ( and @Bubble) i just contacted Stripe thinking this was a default stripe Checkout button behaviour on mobile device but they say it isn’t.
Here was the response:

It seems like something that would be Bubble causing it, since Checkout functions the same on Mobile and Desktop generally

Can you guys resolve this issue. That is remove the first “Save” button that appears when you call the Stripe checkout popup on mobile devices.

Thanks

3 Likes

Given what Stripe said, that’s worthy of a bug report.

Unfortunately, that’s not something we can easily fix. This is related to this note from stripe’s documentation. The way the workflow engine works makes that we have to use this way to do this, which isn’t ideal, I know.

You can prevent Checkout’s popup from being blocked by calling handler.open when the user clicks on an element on the page. Do not call handler.open in a callback. This design indicates to the browser that the user is explicitly requesting the popup. Otherwise, mobile devices and some versions of Internet Explorer will block the popup and prevent users from checking out. This only applies to custom integrations.

4 Likes

Thanks Emmanuel, makes sense now.

Is there a way to at least modify the button? At least to make it look more like the rest of our app. And maybe the text of it as well? Just in case we need it to say something else.

@J805 you can change the button text from the properties.
But that’s all you can do.
I really wish there was an option to turn this feature off especially when using a webview.

1 Like

Ya. I wish there was something more we could do to make look better. Looks kinda cheap the way it is now when on mobile. Funny how it looks just fine on my laptop though.

Anyone figured out how to remove SAVE … OR edit the text at least? It’s confusing users.

This along with the “Pay” & “Subscribe” buttons showing after the create actions on mobile devices has annoyed the crap out of me for ages so I wrote I very sort fix for it. I rolled it into a free plugin that you can install and the fix will do its job - no need to run any actions or elements just simply install the plugin.

https://bubble.io/plugin/stripe-mobile-fix-1551466382836x997357672165277700

13 Likes

Thank you!!! I will be adding this for sure. Always annoyed me as well.

1 Like

Thank you @jarrad.

1 Like

Very welcome, can confirm its working perfectly in a WebView too.

1 Like

Does this work for the “save” button as well when updating a credit card?

Does for me, let me know if it doesn’t though as i was intending to stomp out the pay button the rest where quick ‘I will do them ones too’ at the end.

Works great. Just pops up instead of taking me to another tab. Thanks! :slight_smile: Wish bubble would do this natively. Thanks!!!

1 Like

Just adding another note of appreciate here, @jarrad. Works effortlessly! And now I’ll do some random keyword stuffing so other people can find this thread more easily: Stripe mobile checkout, Stripe mobile payment, Stripe mobile doesn’t work, jarrad is awesome, weird Stripe popup, problem with Stripe, Stripe doesn’t work on phone, what a plugin, Stripe iOS, Stripe Android, checkout on phone, Stripe broken … and I’m done.

2 Likes

Thanks so much for this Jarrad. I am noticing that the plugin is causing an error loading my stripe image. I think the plugin is url encoding an already url encoded address, so:

Untitled%20design is becoming Untitled%2520design (the % is being re-encoded as %25).

Any chance of fixing this? Otherwise, thanks for posting this plugin. Weird if I’m the only one suffering from this.

I just wanted to add my voice to the chorus of appreciation for this fix. Thanks so much @jarrad