iOS app crashes at stripe.createPaymentMethod() when no cc info is entered

[jonsabogal]

I am displaying the CreditCardView component on a modal and I have a "save" button that invokes a setupIntent and saves the user's cc info in Stripe - this is working as expected if the cc info is valid. In iOS in the event I tap "save" without entering anything the app crashes logging the following error:

CONSOLE LOG: Error Domain=com.stripe.lib Code=50 "Missing required param: card[number]." UserInfo={NSLocalizedDescription=Missing required param: card[number]., com.stripe.lib:ErrorMessageKey=Missing required param: card[number]., com.stripe.lib:StripeErrorTypeKey=invalid_request_error, com.stripe.lib:StripeErrorCodeKey=parameter_missing, com.stripe.lib:ErrorParameterKey=card[number]}

***** Fatal JavaScript exception - application has been terminated. *****

NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'id' of null

at

(file: src/app/account/payment-method-form/payment-method-form.component.ts:78:37)

at (file: node_modules/@triniwiz/nativescript-stripe/index.ios.js:259:0)

In android the outcome for this scenario is that validation kicks in notifying me to enter valid cc info, which is what I would expect. I am not sure what type of guard I can write to say something like "if cc info is missing or invalid then tapping "save" will do nothing; or better yet activate the validation". I tried checking for cardParams != null || cardParams != undefined but in iOS the execution seems to make it through anyway and crashes the app; in Android the execution does NOT make it through with this guard in place, and if there's no guard it simply ends up displaying the validation.

let stripe = new Stripe(this.publishableKey);
stripe.createPaymentMethod(this.creditCardView.cardParams, (error, pm) => {
if (error) console.log(error.message);
stripe.confirmSetupIntent(pm.id, this.setupIntentSecret, (error, setupIntent) => {
if (error) console.log(error.message);

running 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 [email protected]",
"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"
}