Question

我正在开发NativeScript应用程序（纯Typescript-而非Angular或React），并希望显示带有从Nativescript-stripe导入的CreditCardView的页面。每次尝试使用信用卡表单呈现xml页面时，它都会失败。能够创建此页面对我来说是一个至关重要的“显示停止器”问题。我有与Cordova应用程序相同的应用程序运行，并希望移至NativeScript。

一个星期内，我能够从头开始学习NativeScript，并复制了Cordova用了一个多月的时间，但是我需要能够通过Stripe处理付款，并且我不想直接处理付款细节。我宁愿使用Stripe的表格，因此如果我在应用程序中收集信息，我将不会对隐私和安全问题负责。我安装了nativescript-stripe插件版本5.0.6，并且正在运行tns版本5.1.0。

有人知道在安装nativescript-stripe插件之前是否必须安装必需的插件吗？我知道其他人正在使用此插件，并且我认为没有遇到此问题，因此我认为它对于我的设置必须是唯一的。我正在尝试的代码几乎完全是从该插件的演示代码中提取的。

在Cordova中，我能够将Stripe信用卡表单嵌入到html页面中，并且在获得授权后，我的应用程序会将信息传递给我编写的Java后端Web服务，该服务将其发送给Stripe。这样，我就不会使用我的私有Stripe密钥或将其公开给应用程序，而且我也不需要任何插件。由于NativeScript不使用html表单，因此我需要使用插件才能启用信用卡表单。我仍然希望使用后端Web服务来处理其余的事务。我要做的就是获得Stripe授权的付款。我正在使用Windows 10开发该应用程序（与Cordova应用程序相同），并将信息发送到网络上另一台Windows PC上运行的Java Web Service。 Java Web Service在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，挂钩和平台文件夹。然后我跑了npm我。就我而言，npm警告我，工作空间根文件夹中的webpack.config.js文件和tsconfig.tns.json文件与新的node-modules目录中的文件不同。他们有纠正措施，但我只是再次删除了所有内容，包括这两个文件，然后重新运行npm i。添加回我的android平台并重建后，插件将按预期工作，并且表单正确呈现。因此，此问题已解决。

nativescript-stripe插件错误：显示带有条纹信用卡形式的付款页面时出现失败

0 个答案: