10分で作るオンライン決済

こんにちわ、マイケル(日本人)です。今からオンライン決済を作る必要があるエンジニアの皆さんに朗報です。イノベーションです、これはすごい物が出てきましたよ。その名もSPIKE！！今日はSPIKEを使って10分でオンライン決済を実装したいと思います。

何がイノベーションなん？

まず導入までが早い

■既存の大手決済システム「フォームや電話で問い合わせ」 ↓ 「営業と値段交渉」 ↓ 「必要書類提出」 ↓ 「この辺でやっと使いはじめれる」まぁ普通に開発環境手に入れるだけでも数日かかります。

■spike 「アカウント作成」 ↓ 「そのまま使い始められる」 3秒です。まじですぐ使い始められます。

決済というお金が絡む仕組みを使う以上、ある程度の手続きはしょうがないのかと思っていましたがアカウント作成してそのまま使い始められるのは衝撃ですね。

安い

大手の決済システムを使うとなると月額費用だけで数万取られます。 spikeなら０円で始められてAPIを使う場合でも月額3000円で使えます。個人で作っているECサイトなどで、費用が高く決済システム導入に足踏みしていた人もすぐ使い始めれます。

安心

お金を扱うシステムなのである程度の信用は必要不可欠です。せっかく運用が周り始めても決済会社に潰れられたりしたら目も当てられません。実際僕は運用していたECで使っていた決済会社が潰れて大変な目にあいました。 spikeはmetapsという会社が運用しているんですがベンチャーでありながら9億の資金持っていて、サービスも日本だけではなく世界で展開している勢いのある会社です。ベンチャー界隈の人はmetaps聞いたことある人多いんじゃないかと。

では早速使い始めましょう

まずは登録

まずは登録 facebook認証を使えば追加入力なしですぐ登録できます。

ダッシュボード

facebook認証後すぐダッシュボードが出てきます。今までの決済始めるときのめんどくさい手続きは何だったのか。。。ホントに一瞬で使い始められます

商品登録してみる

とりあえず商品登録してみました。商品管理から商品登録ボタンをクリックして必要項目を3項目入力すれば終わりです。登録完了商品ページもこんな感じで生成されるので後はこのURLを購入者に配布すればOK。

購入者は商品を気に入ればそのまま商品ページからクレジットカード決済で商品を購入出来ちゃいます。これがすごいのはまったくプログラミング知識がない人でもすぐ商品を決済付きで流通させることができること。これ売りたいとか思った時にこれ使って登録して、facebookでシェアしたりするだけですぐ流通に乗せることが出来ます。 CtoC商品流通の新しい形として面白いなと思ったり。あ、ちなみにECサイトとかに組み込むにはこれ向いてないので今から書くAPIのほう使ってください。

API使ってみる

ではAPI使って決済システムを実装していきたいと思います。というか公式のドキュメントがデモもあってわかりやすいのでそっちを読んだほうが早いかもしれないです。今までの決済会社はドキュメントだけでもPDFで数10ページあって読む気が失せるものでしたが spikeは非常に簡潔にまとまってます、ここも素晴らしいポイントのひとつですね。

まずは決済の流れを見てみましょう。

決済情報をエンドユーザーに入れてもらってそれをspikeに送信して決済用TOKENを取得
取得した決済用TOKENと一緒にspikeに決済情報送信
決済が正常に終了したら後は在庫減らしたり自由にやったって！

では決済用TOKENを取得してみます。

spikeではjsのライブラリが用意されているのでそいつを呼ぶだけです。決済ボタンをクリックしてカード番号に「4444-3333-2222-1111」と入れて他の情報を適当に入れ同意して支払うボタンを押してみてください。 tokenが発行されます。(もちろん課金とかされないので安心して試してみてください)

[codepen_embed height="400" theme_id="0" slug_hash="PwNaqB" default_tab="result" user="genki0406"]See the Pen by genki (@genki0406) on CodePen.[/codepen_embed]

ソースも数行で非常にシンプルです。 SpikeCheckout.configureのtokenコールバックで、サーバーサイドにtokenをpostして APIを呼ぶという感じになります。

サーバーサイドで取得したTOKENを使って決済処理を走らせます。

crulで書いてますがこの内容をrubyとかでやっちゃえばok。パラメーターの詳細はドキュメントを参照してください。

curl "https://api.spike.cc/v1/charges" \
-u "APIシークレットkey:" \
-d "amount=3000" \
-d "currency=JPY" \
-d "card=jsで取得したtoken" \
-d "products="[{\"title\":\"ヘヤジイスタンプ\",\"description\":\"ヘヤジイスタンプじゃぞ\",\"language\":\"JA\",\"price\":3000,\"currency\":\"JPY\",\"count\":1,\"id\":\"00001\",\"stock\":10}]"