Ошибка плагина nativescript-stripe: ошибка при отображении страницы оплаты в виде кредитной карты в виде полосы

Question

Я разрабатываю приложение NativeScript (чистый Typescript, а не Angular или React) и хочу отобразить страницу с CreditCardView, импортированным из nativescript-stripe. Это терпит неудачу каждый раз, когда он пытается представить страницу XML с формой кредитной карты. Возможность создания этой страницы является для меня критической проблемой "шоу-стоппера". У меня работает то же приложение, что и приложение Cordova, и я надеюсь перейти на NativeScript.

За одну неделю я смог выучить NativeScript с нуля и продублировать то, что занимало более месяца с Cordova, но мне требуется возможность обрабатывать платежи через Stripe, и я не хочу обрабатывать детали платежа напрямую. Я бы предпочел использовать форму Stripe, чтобы не отвечать за вопросы конфиденциальности и безопасности, которые возникнут у меня, если я соберу информацию в приложении. Я установил плагин nativescript-stripe версии 5.0.6 и использую tns версии 5.1.0.

Кто-нибудь знает, есть ли обязательный плагин, который я должен установить перед установкой плагина nativescript-stripe? Я знаю, что другие люди используют этот плагин, и я предполагаю, что не сталкивался с этой проблемой, поэтому я думаю, что это должно быть что-то уникальное для моей установки. Код, который я пробую, почти полностью взят из демонстрационного кода плагина.

В Cordova мне удалось встроить форму кредитной карты Stripe в мои html-страницы, и после получения авторизации мое приложение передавало информацию в написанный мной серверный веб-сервис Java, который отправлял ее в Stripe. Таким образом, я не использую и не раскрываю свой личный ключ Stripe для приложения, и мне также не потребуются никакие плагины. Поскольку NativeScript не использует html-формы, мне нужен плагин, позволяющий использовать форму кредитной карты. Я все еще ожидаю использовать свой внутренний веб-сервис для обработки оставшейся части транзакции. Все, что мне нужно сделать, это получить авторизованный платеж Stripe. Я использую Windows 10 для разработки приложения (так же, как мое приложение Cordova) и отправляю информацию в веб-службу Java, работающую на другом ПК с Windows в моей сети. Веб-служба Java работает на Tomcat 9, хотя этот сбой происходит до того, как я дохожу до этого.

Here's my xml file:
<Page xmlns:stripe="nativescript-stripe" loaded="pageLoaded" 
class="page">
 <StackLayout>
    <stripe:CreditCardView id="card"/>
     <Button text="Create Token" tap="createToken" 
         class="btn btn-primary"> 
     </Button>
     <Label text="{{ token }}" textWrap="true"></Label>
  </StackLayout>

and this is the js file behind it:
import { EventData, fromObject } from "data/observable";
import * as app from "tns-core-modules/application";
import { Page } from "tns-core-modules/ui/page";
import { Button } from "ui/button";

let stripe: Stripe;
const tokenSource = fromObject({ token: "" });

export function pageLoaded(args: EventData) {
    stripe = new Stripe("my test key is here");
    tokenSource.set("token", "");

    const page = <Page> args.object;
    page.bindingContext = tokenSource;
}

export function createToken(args: EventData) {
    tokenSource.set("token", "Fetching token...");
    const page = (<Button>args.object).page;
    const ccView: CreditCardView = page.getViewById("card");
    stripe.createToken(ccView.card, (error, token) => {
      const value = error ? error.message : formatToken(token);
      tokenSource.set("token", value);
    });
}

function formatToken(token: Token): string {
    return `ID: ${token.id}\nCard: ${token.card.brand} 
(...${token.card.last4})`;
}

Here's the stack trace that I get when the page is invoked:

01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.callJSMethodNative(Native Method)
01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1120)
01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.callJSMethodImpl(Runtime.java:1000)
01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.callJSMethod(Runtime.java:987)
01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.callJSMethod(Runtime.java:967)
01-07 18:31:35.520  4070  4070 E AndroidRuntime:
      at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: com.tns.NativeScriptException: 
System.err: Calling js method onCreateView failed
System.err: 
System.err: TypeError:
       Cannot read property 'CardInputWidget' of undefined System.err:
       File:
"file:///data/data/<my package name>/files/app/tns_modules/nativescript- 
 stripe/stripe.js, line: 226, column: 52

Когда я нажимаю на ссылку на имя файла, упомянутую в конце, мне говорят, что файл не может быть найден.

ОБНОВИТЬ!!! - НАЙДЕН ОТВЕТ: Я нашел ответ на эту проблему, которая оказалась проблемой сборки. Ответ на: [ https://github.com/triniwiz/nativescript-stripe/issues/38][1]

В основном мне пришлось удалить мой файл package-lock.json, а также мои node_modules, hooks и папки платформы. Тогда я побежал нпм я. В моем случае npm предупредил меня, что мой файл webpack.config.js и мой файл tsconfig.tns.json в корневой папке рабочей области отличаются от файлов в новом каталоге node-modules. У них были корректирующие меры, но я просто снова удалил все, включая эти два файла, и перезапустил npm i. После добавления моей платформы Android и перестройки плагин работает, как и ожидалось, и форма отображается правильно. Так что эта проблема была решена.