プロダクトマネージャーが請求書管理ツールをつくってみた
STORES アドベントカレンダー 2022 15日目の記事です。
今日は、普段はコードを書かないプロダクトマネージャーが、STORES 請求書決済 API を使って、マクロを組む感覚で請求書管理ツールをつくってみた、という記事です。
この記事の目的
STORES 請求書決済 を知ってほしい
非エンジニアでも、ちょっとしたコードで便利なシステムが作れる API を知ってほしい
STORES 請求書決済 とは
私の所属している、STORES 株式会社 では、業務支援を行うプロダクト群をを提供しておりまして、その中でも、私が担当としている STORES 決済 では「決済端末を用いた店頭で決済」と「決済端末を使わないオンライン・非同期型の決済」を提供しています。この、決済端末を使わないウェブページでの決済手段を「STORES 請求書決済」として提供しています。
STORES 請求書決済 では、作成した請求書URLをお客さまへ送信し、お客さまは受け取った請求書の決済画面でカード情報を⼊⼒して決済いただけます。
STORES 決済
STORES 請求書 決済
STORES 請求書決済 API とは
STORES 請求書決済 は管理画面を提供しており、そのままでももちろん使えるのですが、 API 連携を用いて、外部のツールやシステムと連携をすることで、さらに便利に利用することができます。
STORES 請求書決済 API
ちなみに、対面決済である STORES 決済 も、SDKという形で、独自システムに組み込んでいただける仕組みを用意しており、各種 POS システムと連携実績があります。ご興味ある方はお問い合わせください。（本日のテーマではありませんが）
請求書管理ツールを作ってみよう！
前置きが長くなってしまいました。
早速ですが、請求書管理をするためには何ができればいいでしょうか。
請求先のリスト管理ができる
請求書が発行できる
請求書の送付ができる
請求書の消し込みができる
もっとあるかもしれないですが、こんなかんじで一旦いいですかね。いいですよね。
いきなり全部作るのも時間がアレですので、とりあえず
「請求書が発行できる」
「請求書の送付ができる」
ここだけやってみたいと思います。
これらすべて、GAS(※) と、API で実現できます。
※GAS … Google App Script は Google スプレッドシートの標準機能としてついている、エクセルマクロみたいなやつです。めっちゃ便利なのです。
できあがり
はじめまして。「請求書発行くん」です。
なぜ人は、簡易ツールや bot に「〇〇君」という名前をつけてしまうのか
— 永嶋 広樹 / NAGASHIMA Hiroki (@_nagacy) December 15, 2022
画面イメージ
サンプル（コード.gs）
// 請求書を作成
function create() {
// 入力値を取得
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getActiveSheet();
var amount = sheet.getRange("C5").getValue();
var subject = sheet.getRange("C6").getValue();
var expiredOn = sheet.getRange("C7").getValue();
var remarks = sheet.getRange("C8").getValue();
var description = sheet.getRange("C9").getValue();
var email = sheet.getRange("C10").getValue();
// 支払いの作成URL ( https://github.com/Coiney-SDK/CoineyKit-Payge/blob/master/api/payments/create.md )
var url = "https://api.coiney.io/api/v1/payments";
// APIキーは環境に合わせて変更する
var headers = {
'Authorization' : 'Bearer hogehogehogehogehogehoge',
'X-CoineyPayge-Version' : '2016-10-25',
'Accept' : 'application/json',
'Content-Type' : 'application/json'
};
var params = {
'currency' : 'jpy',
'locale' : 'ja_JP',
'method' : 'creditcard',
'amount' : amount,
'subject' : subject,
'expiredOn' : expiredOn,
'remarks' : remarks,
'description' : description
};
var options = {
"method" : "POST",
"payload" : JSON.stringify(params),
"headers" : headers,
"muteHttpExceptions": true
};
// 処理を実行
var response = UrlFetchApp.fetch(url, options);
var responseCode = response.getResponseCode()
var responseText = response.getContentText()
var json = JSON.parse(response);
var paymentUrl = json.links.paymentUrl;
// 結果を表示
var msgTitle = subject + " の 請求書を発行しました！";
var msgText = "URL : \\n" + paymentUrl + "\\n\\n" + email + " にURLを送信しますか？";
var result = Browser.msgBox(msgTitle, msgText, Browser.Buttons.YES_NO);
if (result == "yes") {
var body = remarks + "\n\n" + paymentUrl;
sendEMail(email, subject, body);
}
}
// メールを送信
function sendEMail(email, subject, body) {
MailApp.sendEmail(email, subject, body);
}・STORES 決済 のアカウントを開設すると、管理画面で API キーを取得することができます。`Authorization` の `hogehoge…` ところを適宜書き換えてご利用ください
・API キーは、ブログや Twitter など、誰でも見られる Web 上に公開しないように、ご注意ください（他の人があなたに代わって請求書を発行できてしまいます）
最後に、「請求書発行」ボタンに `create` のスクリプトを割り当ててあげれば完成です。
動き
請求情報を入力して・・・
ぽちっとな
できた
メールを送る！
・・・便利！
・・・どうだろう・・・？
今後の拡張
今日は、請求書の発行ができる部分だけを作りましたが、これだけだとまだちょっと便利とはいえないですね。
今日は作らなかった
「請求先のリスト管理ができる」
「請求書の消し込みができる」
このあたりができるようになると、業務利用に耐えうるツールに育ってくれるかもしれません。
リスト管理は、 Google スプレッドシートの本領発揮でしょうし、消し込みに関しては、請求書の取得のAPIがありますので、こちらを使うとわりと簡単に実現できます。
また、今日はだれでも簡単に触れる GAS でやってみましたが、ちゃんと作り込めば、いろんな業務ツールと接続することもできるはずです。
おわりに
GAS と API を使って、ちょっとしたツールを簡単に作ることができました。
ところで・・・
プロダクトマネージャーである私がいうのもなんですが、決済というのは、言ってしまえば、ただの「機能」と言えば、まぁそうかもしれません。一見地味なプロダクトです。
でも、声を大にして言いたい。
昨今、多くの SaaS が提供しているお店の接客や業務の「体験」の裏側には常にと言っていいほど「決済」があります。「体験」を作るプレイヤーはたくさんいますが、「決済」を作れるプレイヤーは、そう多くはありません。非常に重要なピースになります。
STORES 決済 では、シンプルなアプリでこの「決済」を提供するとともに、連携しやすい「SDK / API」を提供することで、多くのプレイヤーと一緒に「体験」を作っていけると考えています。
STORES 決済 は、多くの「体験」を生み出す可能性があります。
もし、 STORES 決済 というプロダクトに少しでも興味を持っていただけたら、ぜひ、お声がけください！
おしまい。