On IOS, Stripe payment button is hidden by the keyboard

My app integrates with Stripe for payment purpose, but I have an issue on IOS… People can’t pay.

The payment button is hovered over by the keyboard, and there is no button to close it like there is on Android.

I can’t succeed into making the popup scroll either.

I’m using custom integration and didn’t find anything to help me… Other than making everything from scratch with a custom modal and custom form. And I really don’t want to do that.

enter image description here

You can see the tiny top line of the blue button under the keyboard… That’s what we want to click !

Still needing help on this one

Implemented Stripe Elements instead of Checkout.

Did anyone ever find a solution to this using Stripe Checkout?
I really don’t want to switch to elements

I got this answer on SO later - On IOS, Stripe payment button is hidden by the keyboard see if you can check whether it works :slight_smile:

1 Like

Thanks. But that link just links back to this page.

Not sure what happened, I just edited the link, sorry :slight_smile:

Got it thanks for the quick reply.
I actually already found that and have tried it using the Capacitor keyboard plugin, however could not get it to work. The Cordova one is not compatible with Capacitor.
I am still working on this so will post back here if I get it to work (or another solution).

That solutions worked :grinning:. Here is the Capacitor version.
It works on iOS but not Android.

import { Plugins } from '@capacitor/core';
const { Keyboard } = Plugins;

this.platform.ready().then(() => {
      ...
      Keyboard.setAccessoryBarVisible({isVisible: true});
    });