o2-stripe-test Angular2によるStripe APIのテストツール

ビデオ解説
https://youtu.be/SRT-MtzitC0

全ソース
https://github.com/Ohtsu/o2-stripe-test

概要

• o2-stripe-test はAngular2を利用してStripe API サービスをチェックしたいと考えている人のためのプログラムです。

• 主要なAPI (Subscription,Charge,Order,Account,Customer,Token,Refund,PLan,Product,SKU,Event,Dispute,Balance,Transfer,FileUpload)に対応しています。

• クライアントサイド及びサーバサイドの双方のテストが可能です。

  また、共通の関数を利用することにより、さらに多くのAPIに対応させることが可能です。

必要環境

• Node.js
• Git
• TypeScript2
• Angular2
• @ng-bootstrap/ng-bootstrap

インストール方法

このツールをインストールするためには、

• まずこのプログラム用のディレクトリを作成し、そのディレクトリに移動します。

$ mkdir mydir
$ cd mydir

• そのディレクトリで以下のようにクローンを作成します。

$ git clone https://github.com/Ohtsu/o2-stripe-test.git 

• 作成された o2-stripe-test に移動し、"npm install"を実行します。

$ cd o2-stripe-test
$ npm install 

stripe-auth.tsの修正

プログラムの中の"src/app"に移動します。

$ cd src/app

ここに stripe-auth.ts というファイルがあります。
ここにStripeのキーを指定する必要があります。このキーはStripeのサイトから取得してください https://dashboard.stripe.com/account/apikeys.

import { Injectable } from '@angular/core';

@Injectable()
export class StripeAuthService {

  constructor() { }

  public isLogin(): boolean {
    return true;
  }

  public getRole(): any {
    return 'admin';
  }

  // Set your keys of Stripe --------------------------------------------

  public getTestSecretKey(){
    if (this.isLogin && this.getRole() == 'admin'){
      return "sk_test_xxxxxxxxxxxxxxxxxxxxx";
    }
  }

  public getTestPublicKey(){
    if (this.isLogin && this.getRole() == 'admin'){
      return "pk_test_xxxxxxxxxxxxxxxxxxxxx";
    }
  }


}

ローカルサーバの起動

以下のようにローカルサーバを起動します。

$ ng serve

次にブラウザで http://localhost:4200 にアクセスします。

• 初期管理画面

Stripe API のテスト

接続の確認

初期画面において、デフォルトのsubscriptionタブページ内のリストボタンを押してみます。上記で設定したキーが正しければ、ユーザリストが Output に表示されます。

クライアントサイドでのテスト

上段のパネルはクライアントサイドのものです。ここで以下のようにテスト用のクレジットカード情報を入力します。

• CARD NUMBER 4242 4242 4242 4242
• EXPIRATION DATE 10 / 18
• CV CODE 100

さらに、右側の Input 欄にemailをJSON形式で指定します。

Register as a customer ボタンをクリックします。

すると Output 欄に生成されたカスタマーの情報が表示されます。

このカスタマー情報は、ブラウザでStripeサイトにアクセスし、確認することができます。

管理者サイドでカスタマーリストを生成

Customer タブをクリックします。

さらに List ボタンをクリックします。

すると右側の Output 欄にカスタマーリストがJSON形式で表示されます。

バージョン

• o2-stripe-test : 0.1.1
• Angular2 : 2.4.0
• TypeScript : 2.0.0
• @angular/cli : 1.0.0-rc.1
• @ng-bootstrap/ng-bootstrap : 1.0.0-alpha

参考文献

• "Stripe docs",
  https://stripe.com/docs

• "The Stripe Webhook Event Cheatsheet" ,by Pete Keen,
  https://www.masteringmodernpayments.com/stripe-webhook-event-cheatsheet

• "Using Stripe with Angular 2", by Minko Gechev
  http://blog.mgechev.com/2016/07/05/using-stripe-payment-with-angular-2/

• "Taking Stripe Payments with Angular 2 and ASP.NET Core",2017/1/12, by Carl Rippon
  http://www.carlrippon.com/?p=645

変更履歴

• 2017.3.20 version 0.1 uploaded

Copyright

copyright 2017 by Shuichi Ohtsu (DigiPub Japan)

License

MIT © Shuichi Ohtsu