おでんはじめました。

required ちくわぶ and 巾着,optional はんぺん.

決済サイトが簡単に作れちゃったのでそのご報告

ハッカソンに参加してきました

Hack Azure! #1 - Azure Serverless でオンライン決済基盤をつくる というハッカソンに参加してきました。決済サイトの構築なんて未知の世界過ぎて自分には縁がないと思ってたのが、本当に短時間で作れてしまったので感動して(珍しく)ブログ書いてます。

事前にチームのメンバーに Teams や Azure や Stripe や GitHub のアカウントが割り当ててあるので、僕らは Teams でコミュニケーションを取りながら黙々とコーディングをすればよいという感じになっています(この辺の運営スタッフの事前準備が素晴らしかったです)。

msdevjp.connpass.com

Stripe って何?

Stripe とはクレジットカードの支払い方法や商品ごとの金額設定やサブスクリプション方式での支払いなど、決済に関する面倒くさいところをおまかせにできちゃう大変便利なサービスです。

しかも Stripe は API が充実しているので、今回は .NETAPI を使い倒して自前の API を作ろうという主旨のハッカソンでした(今回は時間不足と Stripe への理解不足で使い倒すところまではたどりつきませんでしたが)。

stripe.com

何を作ろう

ramen チームということでラーメンをクリックすると Stripe の決済画面に遷移して購入することができるサイトを作ることに決定。

チーム内に Stripe への理解が深い @myfinder さん主導のもと、僕らが Stripe への基本的な理解を深めるにはやっぱり見た目がある方がいいよねということで、ASP .Net Core Web アプリケーションを選択しました。

最終的に完成したのが下の画面で、各ボタンをクリックすると購入画面に遷移する感じです。

f:id:masatoru:20200627190139p:plain

商品を登録する

まずは商品としてのラーメンを揃えようということで、 Stripe のダッシュボードの商品ページからポチポチ商品とイメージを追加してきます。

f:id:masatoru:20200627200653p:plain

商品にそれぞれ価格を設定していきます。1つの商品に複数の価格を設定することや、クーポンを使ってある期間は何パーセント引きというような設定も可能です。

f:id:masatoru:20200627200803p:plain

商品ごとに価格を設定すると price_xxxx という ID が発行されるので、これを実際のサイトに紐づけて Stripe のライブラリを呼び出す(それはまあなんとなくわかる)のですが、さてどうやって JavaScript を書くんだよと。

JavaScript は書かない!?

事前に Stripe の [ダッシュボード]→[設定]→[Checkout の設定] で [ドメイン] と [Webhook] の設定をしておくと、先ほど登録した商品の価格ごとに [Checkout のコードスニペットを取得] を実行できます。

これをクリックするとコードスニペットジェネレータが <button> の HTML と Stripe への購入画面に遷移する JavaScript を生成してくれるので、OK と NG の時の URL を指定して、これをコピペすればとりあえず実装できるという JavaScript が書けない僕にとって非常にありがたい機能です。

f:id:masatoru:20200627200857p:plain

実際にコピペしたページをクリックすると Stripe 側で事前に用意されている購入画面へ遷移します。

もちろん自前の決済ページに Stripe の機能を組み込むこともできます(みたいです)。クレジットカードはテスト用のクレジットカード番号を使用してテストをおこないます。

f:id:masatoru:20200627200943p:plain

ここまで、.NET 全然使ってないよねということで、時間が足りなかったので事前に登録した画像の URL を取得するところを .NET で書きましたが、これもドキュメントが API キー付きで生成してくれるのでコピペする感じでできちゃいます。

// Stripe の API キーはダッシュボードから取得
// 今回はそれを環境変数に保存しておいて使う
StripeConfiguration.ApiKey = Environment.GetEnvironmentVariable("StripeApiKey");
var options = new ProductListOptions
{
    Limit = 10,
};
var service = new ProductService();
StripeList<Product> products = service.List(
    options
);

// 時間が最後足りなかったので登録されている先頭の画像を表示
var imageUrl = products.Data[0].Images[0];
ViewData["imageUrl"] = imageUrl;

お買い上げありがとうございますと同時に画像を表示するようにしました。

f:id:masatoru:20200627202051p:plain

ということで、本当に決済サイトが完成しちゃいました。

今回の ramen チームのリポジトリですのでよければ参照してください。

最後に

本来のハッカソンの主旨である API を実装するところまでは事前知識が足りなかったので間に合いませんでしたが、もう一回この時間があればどんな API を作ろうかというところまで知見を得られたかなと感じています。

何より知らない人とチームを組んでオンラインでハッカソンをおこなうという新しくて楽しい体験ができたことにとても感謝しています。ありがとうございました。

ハッカソンはいいぞ!!