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

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

Angular2によるStripe APIのテストツール