triniwiz / nativescript-stripe

Apache License 2.0
49 stars 34 forks source link

CreditCardView validation cuts off text in Android #131

Open jonsabogal opened 3 years ago

jonsabogal commented 3 years ago

If I enter an invalid cc number in Android using CreditCardView component, validation kicks in and cuts off the text fields underneath for Expiry, cvc and zip code.

Also I am not sure what causes the validation styling to kick in. If I wrap my "onSave" code under a check for cardParams not being null (I have noticed cardParams is null whenever the cc number is invalid or incomplete), it still kicks in; I assume a simple tap on the screen might trigger it? I was trying to work around this by not showing the CreditCardView validation at all and creating my own.

I haven't tested in iOS but I assume the problem isn't there because the CreditCardView is displayed all in the same row in iOS as opposed to 2 rows in android.

IMG_1666

onSave(cardView: CreditCardView) { if (cardView.cardParams != null || cardView.cardParams != undefined) { this.creditCardView = cardView; this.setupIntentSecret$ = this.paymentFormService.getPaymentMethodSetupIntentSecret(this.user.userId); this.subscribeToSetupIntent(); } }

using ns 7.1.2.

{ "name": "@nativescript/template-tab-navigation-ng", "main": "main.js", "displayName": "Tabs", "templateType": "App template", "version": "7.0.6", "description": "NativeScript Application", "author": "NativeScript Team oss@nativescript.org", "license": "SEE LICENSE IN ", "publishConfig": { "access": "public" }, "keywords": [ "nstudio", "nativescript", "mobile", "angular", "{N}", "tns", "template", "tab", "navigation", "category-general" ], "repository": "", "homepage": "https://github.com/NativeScript/nativescript-app-templates", "bugs": { "url": "https://github.com/NativeScript/NativeScript/issues" }, "scripts": { "lint": "tslint \"src/*/.ts\"" }, "dependencies": { "@angular/animations": "~11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@nativescript/angular": "~11.0.0", "@nativescript/camera": "^5.0.8", "@nativescript/core": "~7.1.0", "@nativescript/firebase": "^11.1.3", "@nativescript/theme": "~2.3.0", "@triniwiz/nativescript-stripe": "^7.0.0-beta-0", "reflect-metadata": "~0.1.12", "rxjs": "^6.6.0", "zone.js": "~0.11.1" }, "devDependencies": { "@angular/compiler-cli": "~11.0.0", "@nativescript/android": "7.0.1", "@nativescript/ios": "7.1.1", "@nativescript/webpack": "~4.0.0", "@ngtools/webpack": "~11.0.0", "codelyzer": "~6.0.0", "node-sass": "^4.14.1", "tslint": "~6.1.3", "typescript": "~4.0.0" }, "private": "true", "readme": "NativeScript Application" }