skimemo

• 追加された行はこの色です。
• 削除された行はこの色です。
• skimemo - 日記/2019-04-17/NativeScriptのJavaScriptからStripeを使う へ行く。
• skimemo - 日記/2019-04-17/NativeScriptのJavaScriptからStripeを使う の差分を削除

#blog2navi()
*NativeScriptのJavaScriptからStripeを使う [#aec8b325]

[[NativeScript:https://docs.nativescript.org/]]+JavaScriptから[[nativescript-stripe:https://www.npmjs.com/package/nativescript-stripe]]を使うときにはまったのでメモです。~
~
私はNativeScript+JavaScriptでアプリを書いています。（まずこれはお勧めしません。世の中的にはTypeScriptがメジャーなようです）~
私はNativeScript+JavaScriptでアプリを書いています。（世の中的にはNativeScriptに合わせるのはTypeScriptがメジャーなようで、そちらの方が情報が多いです。なのでこれから始める方はTypeScriptがお勧め）~
&inlinecode{nativescript-stripe};のマニュアルには、以下のように呼び出せとあります。~
#code(JavaScript){{{
var Stripe = require('nativescript-stripe').Stripe;
const stripe = new Stripe('yourApiKey');
stripe.createToken(cc, (error,token)=>{
  if(!error){
    //Do something with your token;
 
  }else{
    console.log(error);
  }
});
}}}
ところが、これをやるとnewのところで以下のエラーが出て落ちます。~
 JS: ERROR Error: Uncaught (in promise): TypeError: com.stripe.android.Stripe is not a constructor
 JS: TypeError: com.stripe.android.Stripe is not a constructor
どうやらプラグインの定義がJavaScriptからはうまく呼べる形になっていないようです。（何かのバージョンの問題?）~
~
そこで、他のプラグインを参考に以下のようなファイルを1つ作ってみました。~
~
common/stripe-index.js
#code(JavaScript){{{
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var nativescript_stripe = require("nativescript-stripe");
exports.Stripe = nativescript_stripe.Stripe;
exports.Card = nativescript_stripe.Card;
}}}
~
そしてこれを使ってStripeを呼び出します。~
#code(JavaScript){{{
const stripe = require("../../common/stripe-index");
const card = new stripe.Card('4242424242424242', 12, 21, '111');
const strp = new stripe.Stripe('your_public_key');
strp.createToken(card, (error,token)=>{
    if(!error){
        //Do something with your token;
        console.log('stripe.createToken:success:'+token['id']);
    }else{
        console.log('stripe.createToken:error:'+error);
    }
});
}}}
これで無事tokenが返るようになりました。~
 stripe.createToken:success:tok_1EQ6leBstKlU6P**********
めでたしめでたし。

** トラブル例 [#z4e7d744]
上記の問題が発生する前には、以下のようなエラーも出ていました。
 TypeError: Cannot read property 'CardInputWidget' of undefined
 File: "file:///data/data/org.nativescript.SCOP/files/app/tns_modules/nativescript-stripe/stripe.js, line: 226, column: 52
これは、nativescriptとandroid platformのバージョンを最新にすることで解消しました。（逆に言うと今後のupdateで再度エラーになる可能性も・・・）~
&inlinecode{tns info};で現在のバージョンを確認の上、
 npm install -g nativescript

 tns platform update
で最新に更新できます。

#htmlinsert(twitterbutton.html)
RIGHT:Category: [[[NativeScript>日記/Category/NativeScript]]] - 15:09:03
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()