iOS向けライブラリwebpay-token-iosを公開しました

iOS向けに、クレジットカードの情報からWebPayのTokenオブジェクトを作成するライブラリを公開しました。

iOS環境上で、端末が直接WebPayとクレジットカードの情報をやり取りし、代替となるトークンを作成することで サーバサイドにクレジットカードの情報を送信することなく、決済処理を実現出来るようになります。

images

本ライブラリは、CocoaPodsにも公開しており、 ソースコードはGitHubにてMITライセンスで公開しています

WebPayの公開可能鍵を与えることで、クレジットカードをトークン化する部品に加えて クレジットカード情報の入力用フォームや、モーダルで表示できるビューコントローラを用意しています。

webpay-token-iosの使い方

インストール

CocoaPodsを使った方法(推奨)と、手動でコピーする方法があります。

CocoaPodsを使ってインストール

Podfile

1
pod 'WebPay', '~> 1.0.4'

としてインストールすることができます。

手動でコピーしてインストール

GitHubのレポジトリからライブラリをダウンロードし、Webpayというディレクトリを丸ごとプロジェクトにコピーします。

インストール後に#import "Webpay.h"を追加し、ビルドが通るかどうか確認してみて下さい。

組み込み方法

本ライブラリは

  1. WPYTokenizer(モデル。Tokenオブジェクトの作成を担当)
  2. WPYCardFormView(ビュー。カード情報入力フォーム)
  3. WPYPaymentViewController(ビューコントローラー)

の3つの独立した部品で成り立っています。 「ビューは全部自分で作る」や「フォームは再利用したい」など、どこまでを内製し、どこまでをライブラリに頼るか、柔軟に選択する事ができます。

初期化(どの部品を使うにも必須)

AppDelegateapplication:didFinishLaunchingWithOptions:でWebpayのAPIキー(公開可能鍵)をセットします。

1
2
#import "Webpay.h"
[WPYTokenizer setPublicKey:@"test_public_YOUR_PUBLIC_KEY"];

WPYTokenizer(モデル)

WPYTokenizertokenの作成を担当する部品です。ビューは自分で作りたい場合に最適です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#import "Webpay.h"

// カードモデルを作成し、必要な値を渡します
WPYCreditCard *card = [[WPYCreditCard alloc] init];
card.number = @"4242424242424242";
card.expiryYear = 2015;
card.expiryMonth = 12;
card.cvc = @"123";
card.name = @"TARO YAMADA";

// カードモデルとコールバックを渡します
[WPYTokenizer createTokenFromCard:card completionBlock:^(WPYToken *token, NSError *error){
  if (token){
    NSLog(@"token:%@", token.tokenId);
  }else{
    NSLog(@"error:%@", [error localizedDescription]);
  }
}];

WPYCardFormView(ビュー)

WPYCardFormViewはクレジットカード情報の入力を担当するビューです。入力されたカード情報がバリデーションを通ると、delegateのメソッドが呼ばれます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)viewDidLoad
{
    // WPYCardFormViewを作成し、自らをデリゲートに設定します
    WPYCreditCard *card = [[WPYCreditCard alloc] init];
    WPYCardFormView *cardForm = [[WPYCardFormView alloc] initWithFrame:CGRectMake(0, 0, 320, 300) card:card];
    cardForm.delegate = self;
    [self.view addSubview: cardForm];
}

// WPYCardFormViewのデリゲートメソッド
- (void)validFormWithCard:(WPYCreditCard *)creditCard
{
  // フォームに入力されたカード情報がバリデーションを通ると呼ばれます
  self.button.enabled = YES;
}

WPYPaymentViewController(ビューコントローラー)

WPYPaymentViewControllerは、ビューを一切作らずに、そのまま表示することができるビューコントローラーです。 カード情報入力フォームを表示し、「カードで支払う」というボタンがタップされると、トークンを作成し、最後にコールバックが呼ばれます。

UINavigationControllerからpushViewController:animatedで表示したり、presentViewController:animated:completion:でモーダルで表示する事ができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#import "Webpay.h"
WPYPaymentViewController *paymentViewController = [[WPYPaymentViewController alloc] initWithPriceTag:@"¥350" callback:^(WPYPaymentViewController *viewController, WPYToken *token, NSError *error){
    if(token)
    {
        // サーバーにトークンをPOSTし、決済を完了させます
        // 決済完了後
        [viewController setPayButtonComplete]; // 「カードで支払う」ボタンの色が青から緑になり、タイトルもチェックマークに変わります
        [viewController dismissAfterDelay: 2.0f];
    }
    else
    {
        NSLog(@"error:%@", [error localizedDescription]);
    }
}];
[self.navigationController pushViewController:paymentViewController animated:YES];

注意点

  • iOS6以上での利用を前提としています
  • iOSアプリケーションにおいて、決済機能を導入する場合、対象となる商材についてAppleによる制約がございますので十分に調査の上ご利用ください
  • 課金(Chargeオブジェクトの作成)などの非公開鍵が必要な処理は行えません

アプリ内に非公開鍵を埋め込むと、リバースエンジニアリングされた場合に、非公開鍵が漏れる可能性があります。 本ライブラリでクレジットカード情報をトークン化した後、サーバ側にトークンを送信することで決済を行うようにしてください。

card.ioとのインテグレーションのサンプル

card.ioはiOS、Android環境で使える クレジットカード情報をカメラで読み込み、カード番号の入力を簡素化するライブラリです。

webpay-token-iosと組み合わせて、クレジットカードを撮影し、カード情報を満たした上で WebPayのトークンを作成するiOS向けアプリケーションのコードをサンプルとして公開しています

実際にこのサンプルをビルドした場合、以下のような操作で利用することが可能になります。

webpay-token-ios with card.io from WebPay on Vimeo.

Android向けにも同様のライブラリを公開するよう準備をしております。 今後モバイル環境でもWebPayによる決済を簡単に利用できるように努めて参ります。