Tipsi-stripe: <PaymentCardTextField /> locks up iOS apps on tipsi-stripe v6

[projectpublius]

Before I have submitted the issue

[X] I have read an installation guide
[X] I know that for an iOS I need to install pods because I've read the installation guide
[X] I have read a linking guide and checked that everything is OK like in manual linking guide
[X] I know that before using tipsi-stripe I need to set options for my app as described in usage guide

The problem

<PaymentCardTextField /> locks up iOS applications after upgrading tipsi-stripe from 5.6.0 to 6.1.2 and upgrading the iOS Stripe SDK from 11.2.0 to 13.2.0. The issue does not impact Android.

Environment

• tipsi-stripe version: 6.1.2
• Last tipsi-stripe version where the issue was not reproduced (if applicable): 5.6.0
• iOS or Android: iOS
• OS version: 12.1
• React-Native version: 0.57.5
• (Android only) com.google.firebase:firebase-core version:
• (Android only) com.google.android.gms:play-services-base version:

Screenshots, GIFs (Must to have)

Code To Reproduce Issue (Good To Have)

Issue can be replicated by creating a new react native project and attempting to run the example code (https://tipsi.github.io/tipsi-stripe/docs/paymentcardtextfield.html) on a device or in simulator

[cybergrind]

@projectpublius hi, thank you for your issue. Haven't checked it now, but internally we've upgraded our apps and everything looks fine for never stripe sdk + tipsi-stripe.
So maybe this is an issue with react-native 0.57.5 We're still on 0.52.3

[cybergrind]

I cannot give you an estimation when we will look into this issue deeper right now. We're short on dev resources right now.

[projectpublius]

Thanks. Reverting to version 5.6.0 works as a temporary solution.

[nenti]

Same on RN0.56.1.

[theohdv]

Same for me on RN 0.56.1. But it does not work only on iPhone X, XR, XS and XS max.

[projectpublius]

Failed for me on a physical iPhone 6s Plus.

Interestingly, the field does work in the simulator.

[VicFrolov]

Yep, having the same issues as above. On Simulator, the field works, but tapping away from it causes the app to crash. On devices, simply tapping on the textInput causes a crash.

[thanhcuong1990]

I've same issue with react-native 0.57.7 and tipsi-stripe 6.1.2.

[theohdv]

I do not really understand why but it seems to be related to those lines

- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:self.window];
}

&

[[NSNotificationCenter defaultCenter]
  addObserver:self
  selector:@selector(keyboardWillShow:)
  name:UIKeyboardWillShowNotification
  object:self.window];

Because removing those lines seems to fix the issue.
Can someone explain me what is it for ?

I've created a PR (#418) to try to fix this.

[alexsegura]

Same problem when running on a real device (iPhone 5s)

I see this in XCode:

Can't find keyplane that supports type 11 for keyboard iPhone-Portrait-NumberPad

[alexsegura]

As a temporary workaround on iPhone you can use react-native-credit-card-input, it works

[jlkalberer]

So this delegate is causing an infinite loop: https://github.com/tipsi/tipsi-stripe/blob/master/ios/TPSStripe/TPSCardField.m#L32-L36

I commented these lines out and things started working..

I'm not sure what exactly the code there is supposed to do as I don't know Objective-C.

[vTrip]

Editing the file like the above commit from team55 seems to fix the problem for me. My app was unresponsive after attempting to focus into the tipsi text field.

This now lets me focus in however I cannot tap out and dismiss the keyboard.
My textfield is nested inside a scrollview that has keyboardShouldPersistTaps="handled"

Using "always" does not fix the issue either.

Devices my the fix has solved for are:

• iPhone 8 Plus / SE / X / XR ... testing others
• No testing for Android done yet

[vTrip]

Editing the file like the above commit from team55 seems to fix the problem for me. My app was unresponsive after attempting to focus into the tipsi text field.

This now lets me focus in however I cannot tap out and dismiss the keyboard.
My textfield is nested inside a scrollview that has keyboardShouldPersistTaps="handled"

Using "always" does not fix the issue either.

Devices my the fix has solved for are:

• iPhone 8 Plus / SE / X / XR ... testing others
• No testing for Android done yet

-

[jparr]

This bug is also present in v7 on RN 56

[otajor]

Still seeing this issue in v7.4.0 with RN 58.5

[thanhcuong1990]

@otajor For temporary fix you can use my fork.
"tipsi-stripe": "github:thanhcuong1990/tipsi-stripe#master"

[bithavoc]

I'm seeing this issue with "tipsi-stripe": "7.5.0", RN 0.59.5, iOS 12.2 on device only, simulator is fine.

Sometime it freezes, sometimes it crashes:

Snippet:

<PaymentCardTextField
            ref={this.cardField}
            />

[ashfurrow]

We're seeing this on RN 0.59.2 since our upgrade from 0.57.7 (tipsi-stripe version 7.5.0). The PR #418, which fixed the issue, was closed without an explanation. Does anyone know why? Or can confirm they're using this fix in production? Thanks!

[rvera]

So, is this going to get fixed?

[cybergrind]

@ashfurrow / @rvera #418 didn't pass CI tests so we cannot merge it even if it fixes something it obviously breaks tests. Apparently, it is going to be fixed if someone submits proper PR that passes tests and add test for this case and that hasn't happened yet.
So if you feel like you can handle this we will appreciate PR

[ashfurrow]

@cybergrind Thank you for the response. I understand that you can't merge a PR that breaks tests, but the code in question is Objective-C and doesn't look like it's been touched in a few years and, without context around why the code is even there, it will be difficult for an OSS contributor to fix the bug _and_ the tests.

Obviously this is Tipsi's library, and I do sincerely thank you all for sharing it with the open source community, so we can't expect you to fix this for us. Unfortunately, it seems like we're at an impasse; the OSS users who are seeing this bug will have to fork the library and apply the fix from #418. Thanks again for the open source library.

[cybergrind]

@ashfurrow it all is up to you =)

without context around why the code is even there, it will be difficult for an OSS contributor to fix the bug and the tests.

So we're all in the same situation. I don't have anyone who is familiar with this code right now and someone needs to dig into it and discover what is that all about.

[ashfurrow]

Yeah, I figured that might be the case :) It happens, I'll keep this on my backlog of things I'd like to fix someday when I get the time 😉

[fbartho]

In React-Native 45, they removed a deprecated API that <PaymentCardTextField /> was built on.

This commit: https://github.com/facebook/react-native/commit/bc1ea548d0017f131c36a30ce06bf4d512cb2f8c#diff-3e154f92c7ba4cb47e96785b9dadf3aa

The documentation says we need to support React-Native 40 or later, or we need to make another API breakage (Compatibility Docs)

I have a minimal fix that appears to work, but I'm not really set up to test this all the way back to React-Native 40.

I've opened a PR for comment: https://github.com/tipsi/tipsi-stripe/pull/508 /cc @mindlapse @cybergrind

[nchase]

React is at 0.60 now – way past 40, which appears to have been tagged two
and a half years ago – I wonder if the authors/maintainers are still
actually interested in maintaining support back that far?

My two cents is that this is worth a version bump and a change in
compatibility – are any maintainers around to chime in?

On Tue, Jul 23, 2019 at 7:08 PM Frederic Barthelemy <
[email protected]> wrote:

In React-Native 45, they removed a deprecated API that /> was built on.

This commit: facebook/react-native@bc1ea54

diff-3e154f92c7ba4cb47e96785b9dadf3aa

https://github.com/facebook/react-native/commit/bc1ea548d0017f131c36a30ce06bf4d512cb2f8c#diff-3e154f92c7ba4cb47e96785b9dadf3aa

The documentation says we need to support React-Native 40 or later, or we
need to make another API breakage (Compatibility Docs
https://tipsi.github.io/tipsi-stripe/docs/compatibility.html)

I have a minimal fix that appears to work, but I'm not really set up to
test this all the way back to React-Native 40.

I'm happy to open a PR for comment, and will do so shortly.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tipsi/tipsi-stripe/issues/408?email_source=notifications&email_token=AABQFPOVHZ52MS65YXFBWSLQA6FO7A5CNFSM4GFPBMOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2UV2DA#issuecomment-514415884,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABQFPJ4WON7CNX3MKNQ4YTQA6FO7ANCNFSM4GFPBMOA
.

[bramski]

This is broken on RN 0.59.10 and tipsi-stripe 7.5.1, what do I need to do to get around/fix it? iOS fully locks up when users try to close the modal containing the payment text field.

[bramski]

Alright, this PR is old now and trying to use the fix PR breaks due to: https://github.com/viromedia/viro/issues/558
I'll see if I can make an update PR to rebase this PR against tipsi-stripe which has moved ahead. I literally don't understand how tipsi-stripe moved ahead with new releases for RN without fixing this issue. Mind blown.

[fbartho]

@bramski -- I've fixed this in #508 (which is from a more-up-to-date master) -- we just need to get that PR Merged. I can send you a script to hot patch tipsi-stripe on npm install (post install) if you're interested.

[bramski]

I can try it @fbartho . But I tried using your fork locally and things were still broken so...

[bramski]

I rebased his branch and opened another PR: https://github.com/tipsi/tipsi-stripe/pull/521
I have to fix this right now because people can't pay for things and that is a serious problem.

[moazkh60]

The issue is still there on 7.5.1 what is the final solution for this? When will you merge the PR with fixed issue.

[bramski]

@moazkh60 I can confirm this is fixed in 8.0.0-beta.7.

[amie-wilt]

I'm new to tipsi-stripe but heard/read great things about it so I was a little surprised by the issues I had getting the package installed and running successfully, but I have to say I'm outright baffled after running into this problem ☝️ almost immediately and then coming across this thread. If I'm not mistaken, there is one component feature in the library. I understand there are other methods that can be used but I still can't understand how the one and only component has been broken for so long and is still unresolved, especially since it's seems like so many offered up solutions/PRs. A little discouraging.

@bramski I tried 8.0.0-beta.7 and am seeing the following error, have you not seen this? Unfortunately I'm not very familiar with Objective-C.

iOS: 12.3.1
RN: 0.60.5

[bramski]

@amie-wilt take your question to discord.
https://discordapp.com/channels/606076644922359834/606076644922359838
Looks like a build issue with the beta I haven't seen.

[fbartho]

@amie-wilt -- Unfortunately that issue is because you're not running a modern enough version of stripe-ios you may have integrated this through Cocoapods, or manually, but I recommend you upgrade to stripe-ios 17.0.1 -- there's a fix to support 17.0.2 in experimental but it hasn't been spun into a beta yet!

[unfrgivn]

Confirmed PaymentCardTextField working on 8.0.0-beta.8 with pod 'Stripe', '17.0.1'

RN 0.59.10
iOS 13.0