Ionic - On IOS, Stripe payment button is hidden by the keyboard - ios

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.
You can see the tiny top line of the blue button under the keyboard... That's what we want to click !

Install cordova keyboard plugin and in you app.component.ts add this:
this.platform.ready().then(() => {
...
this.keyboard.hideFormAccessoryBar(false); // Hide the keyboard accessory bar with the next, previous and done buttons.
...
});
Then when the keyboard show up you will have a nice "Done" option to close it.
This should help your customer to finalize payment.

Is that in a webview? Stripe doesn't always work the way you'd expect in a webview. You might need to build your form with Elements rather than Checkout.

Related

Adding keyboard hide button in accessory bar in Ionic

I am using the ionic framework to create my app and I use a lot of forms with modals. In order to move between fields a user normally taps on the space where there isn't any image however this can lead to unexpected behaviour.
I would like a button to hide the keyboard exactly like the image below.
If you are using cordova, you can first install this plugin
cordova plugin add com.ionic.keyboard
Then, in your callback, initiate
cordova.plugins.Keyboard.close();
Some information regarding attaching an element above the keyboard.
keyboard-attach is an attribute directive which will cause an element
to float above the keyboard when the keyboard shows. Currently only
supports the ion-footer-bar directive.
On iOS, if there is an input in your footer, you will need to set
cordova.plugins.Keyboard.disableScroll(true)
The Usage
<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
<h1 class="title">Title!</h1>
</ion-footer-bar>

Icons for iOS Action Extensions Disappearing After Share Button Menu Disappears

I've been working on a couple of iOS action extensions for a while, but I have noticed an odd behavior I was wondering if anyone else saw. In short, after you install and turn the extension on from the share button menu and leave the menu, it disappears from the menu.
More specifically, when you first install the extension, you expect you have to press the share button, scroll the bottom bar menu (for the action extensions) all the way to the right, press the "More" button, toggle your extension on and then press done. At that point the icon for the extension will appear and you can use it. However, the next time you want to use the action extension, the icon will not appear and you have to repeat the process, even though when you look in the "More" menu, the toggle switches for your app are already flipped on.
I wish I could add images to further elaborate here, but I can't because of StackOverflow's rules.
I have not been able to find any information on this any where, so I was hoping someone here has noticed this behavior or not. Any help on resolving this would be greatly appreciated.
This has been a bug in iOS 8.3, and has been acknowledged by Apple.
Fixed in iOS 9.
Issue on OpenRadar
How to solve:
The new share extension is NOT visible in the default list, and is CHECKED in the “More…” list. Changing any of the switches and tapping Done will show the new share extension in the default list.

Button Highlighting and Scroll Issue in Phonegap

I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.

How to change the keyboard in Phonegap iOS

I have making a phonegap app which have text fields in it.
Problem:- I want to remove the Done button from the keyboard or I want a Event listener of done button. Ether of the things will work for me.
My Problem is similar to this link
You can't remove the done button, since Phonegap uses a UIWebView to present the UI you will be stuck with keyboard used by the UIWebView.

Save to Foursquare button doesn't work on iPad

I'm trying to build an "Save to Foursquare" button to my site, but it doesn't work on an iPad. In fact, I checked and none of the sites that use this button work on the iPad - pressing the button just darkens the display but doesn't show the Foursquare dialog. Is there a fix for this?
We just pushed an improvement to handling the save-to-foursquare button on iOS. Hopefully that should fix whatever problem you were hitting?

Resources