Angular2とJavaでPay.jpの定期課金をやってみる

こんにちわ！
ゴーリスト開発のモリツグです。

Angular2で何かすることを隠れ蓑にFlexを懐かしんできた1回目と2回目でしたが、残念ながら今回はFlexを懐かしむ要素がありません。

今回は以下のような方に向けた内容になります。
・Angular2とJavaでクレジットカード課金したい
・Pay.jpを使ってみようと考えている方

Pay.jpとは

クレジットカードの決済周りのAPIを提供してくれているサービス。
サイトの説明やAPIドキュメントがものすごく分かりやすくて良い。
APIで出来ることは大体全部サイト上のGUIでも提供されており、売上などのダッシュボードが綺麗。
定期課金にも対応。

カード情報のトークン化

詳しくはこちらになるのですが、Angular2ではコンポーネントにscriptタグを埋め込んでもコンパイラが削除するので「<script> タグ一行で実装可能」的なものは利用できません。
ngAfterViewInitとかで頑張って突っ込んでみても正常に動作しなかったので皆さんは無駄な努力をしないように願っています。
したがって今回はpay.jsを利用してトークンを作成しました。

// コンパイラに怒られるので定義しておく
declare var Payjp: any;

@Component({
　.....
})
export class CreditCardDialog{
  .....
  // パブリックキーをセット
  Payjp.setPublicKey(PAY_JP_PUBLIC_KEY); 

  // カードオブジェクトを作成
  let card: Object = {
    number: "4242424242424242",
    cvc: "123",
    exp_month: "12",
    exp_year: "2020"
  };
  
  // tokenを取得 エラーかどうかはstatusで判定
  Payjp.createToken(card, (status, response) => {
    let token:string = response.id;
  });
  .....
}

PAY_JP_PUBLIC_KEYはPay.jpからアカウントごとに発行されるパブリックキーです。
以降のトークンを利用したサーバ側でのPay.jpへのリクエストではシークレットキーを利用します。
サーバ側でのCustomerの作成と事前に作成しておいた定期課金プラン(Subscription)をユーザに紐づける処理は以下になります。
定期課金プランはAPIでも作成できますが、Pay.jpのサイト上でGUIで作成したほうが楽です。
コード中のPAY_JP_PLAN_IDは定期課金プランのIDです。

// トークンを用いてユーザを作成
Map<String, Object> customerParams = new HashMap<String, Object>();
customerParams.put("id", "cus_01");
customerParams.put("email", email);
customerParams.put("card", tokenId); // 先ほど作成したトークンをセット
Customer customer = Customer.create(customerParams);

// 作成したCustomerに定期課金プランを登録する
// 今回のプランではフリー期間なしですぐに初回の課金が行われる
Map<String, Object> subscriptionParams = new HashMap<String, Object>();
subscriptionParams.put("plan", PAY_JP_PLAN_ID);
subscriptionParams.put("customer", customer.getId());
Subscription.create(subscriptionParams);

まとめ

Angular2でscriptタグをComponent中に埋め込めないので少し面倒かなという印象です。
Pay.jpは登録すると本番環境とテスト環境の２つのキーを発行してくれるのでテストも簡単です。
メジャーバージョンアップしてAngular4になりましたが、進化の速さに負けずにユーザが増えてくれるといいなぁと思います。