ジャバ・ザ・ハットリ

ベルリンのITスタートアップで働くソフトウェアエンジニア

Stripeの公式ドキュメントを読む前に理解しておくべきこと

2020-04-07プログラミング

Stripeのサービスは素晴らしい。だからこそ公式ドキュメントの不親切さが残念でならない。この不親切さからStripeの導入を検討されている人が「もう使うのやめるわ」とならないか心配でしょうがない。

Stripeの公式ドキュメント

だが大丈夫。ここに書く内容を理解しておけばだいたいは事足りる。この理解無しにイキナリ公式ドキュメントを読んでしまうと、きっと何十時間もムダにあっちこっちを英語で読むことになるだろう。(私がそうだったんだ!)

image

Stripeとは

Stripeは簡単にあなたのウェブサイトやアプリに決済手段を提供してくれるサービス。

1回だけの支払いから、毎月20日になったら300円を引き落とす、といった定期支払いまであらゆるケースに対応している。

さらに決済手段もクレジットカードからApplePayまで世界各国のほぼ全てのがそろっている。手数料も初期費無料で決済額の3.6% と個人開発者であっても気軽に自分のアプリに導入できるのがメリット。

ダッシュボードもイケてるので管理が楽でいい。

Stripe.js はV3になって多機能に

2020年にStripe.jsはV2からV3になってセキュリティが強化されて、さらに多機能になった。それにともなってV2の知識のまま公式ドキュメントを読むと「あれ。前と違う」ってなる。

それ全部V3になったから。セキュリティまわりの実装がだいぶ異なってるので、お間違えなく。

今のところ英語、日本語ともにブログに書かれている内容はほとんどがV2のまま。他サービスの公式サイトが提供しているコード事例もV2だったりする。例えばFirebaseの公式GitHubがStripe接続例を出しているが、StripeV2のかなり古い手段を使っている。

Firebase公式のコードのままだとGDPR基準を満たせない。

最初に見るべき項目はまず以下の2つだけ

公式ドキュメントを開くと、左にこのメニューがある。

image

ただし全部が等しく重要なのではないし、上から順番に読む必要もない。あなたがこれから決済手段を実装しよう、と思ったら読むべき項目は以下の2つ。

  • Payments
  • Checkout

とにかくこの2つから。それぞれは

Payments は自分でまーまーカスタマイズできる決済手段の方法。

Checkout はあんまりカスタマイズしないでStripeが提供する決済フォームを流用する方法。

メニュー項目はずらーっと18項目も並んでいる。だから、私はPaymentsを全部読んで、その後Billing、Connect、、、って読んでいって「V3になってややこしいなー」とか思いながらずっと読んだわ。しかし結論的にはそんなに読まなくても、上記の2項目だけをさらっと読めばよかった。そうすれば大局的に理解できて、その後に必要に応じて詳細が追える。

だいたい項目の大きさとか並べ方が曖昧。どれに重みがあるのか、パッと見ても分からない。どう考えてもCheckoutが上から4番めで文字の大きさもSigmaと同じってのはおかしい。

あなたには私と同じ轍を踏んで欲しくないので、他項目はいいからまず「Payments」と「Checkout」を読んでください。

おすすめはCheckoutのカスタマイズしない方

個人開発で決済を入れるのなら断然にCheckoutのカスタマイズしない方をオススメする。

ユーザーの立場で考えてみると、ただでさえあやしい個人開発者のアプリにその個人でデザインされたフォームに「クレジットカード番号を入れてね」とか書いてあっても入れる気にならない。実際にはStripeの決済手段を使うとクレジットカード番号などはいっさい開発者が管理したりすることはないのだが、そんな原理を説明してもフォームのデザインはとても重要。

その点Checkoutのカスタマイズしない方を使えば、Stripeが提供するこんな画面で決済できる。

image

つまり個人開発アプリとは切り離して「Stripeで決済してください」ってなる。

下にはお馴染みのStripeロゴが入るし、個人でやってるだけのアプリ開発者にとっては「Stripe様が安全な取引を保証します!」と言っているようでココロ強い。

フローを先に理解すること

Stripeの公式ドキュメントは全てイキナリ、コード説明だ。あなたが全体フローを理解していようといまいとお構い無し。

だいたい最初にドキュメントを読む時は全体のフローが分かっていない。でも目の前のドキュメントには詳細なコード事例があるだけ。

例えて言えば東京の交通機関をよく知らない人にある場所までの行き方を言う際に「まず小銭を手にもって駅の発券機にその小銭を入れて、、」って細かいとこから説明して、10分ぐらい続いた後に最後の最後で「すると到着するのが富士山のふもとです」って「お前、富士山の行き方を説明しとったんかい!」てなるようなモン。どこに行くのかぐらい先に言ってくれよ、と。

私は公式ドキュメントを読みながら「おい!待て!これは一体どこに行こうとしてるんだ?」と何度思ったことか。ずーっと読んでいって最終的にはあまり求めていない、すごいカスタマイズされた決済手段が出てきて「それやったら最初から読まんかったわ」となった。

Checkout one-time paymentのフロー

例としてもっともシンプルで簡単なone-time paymentのフローを載せる。

このフローは大きく分けて2つ

  1. セッションを入手する
  2. チェックアウトを完了する

から成り立っている。まず1,のセッションから。フローはこちら。

image

まずユーザーがクライアントから欲しい商品を入力する。例)1000円のTシャツをひとつ。 その情報を①でクライアント→サーバーへ伝える。

サーバーはその内容をitemとしてStripeに伝える。コードで言うとどんな言語でも stripe.checkout.sessions.createのように記述される。(StripeはRuby, Java, Go, JavaScriptとどんな言語でも対応していて、その事例はドキュメントに載っている)

この返り値がセッション値となって手順③のようにサーバーに返ってきて、そのままクライアントに伝える。

つまりユーザーが買いたい商品をその数量やら内容をセッション値にしてサーバーを介してクライアントに戻すことになる。

次のこのフローでチェックアウトが完了する。

image

受け取ったセッションを元にクライアントでstripe.redirectToCheckout(<セッション値>)を実行すると、クライアントがStripeのチェックアウト画面へリダイレクトされる。

この画面。 image

ユーザーはここでクレジットカード番号などを入れて、決済を完了させる。

②完了したら、Stripeから通知がサーバーに入る。ダッシューボードに入れたウェブフック用のURLで認識して、とにかくあなたのサーバーに通知が入る。サーバーでユーザー情報に合わせてユーザーが商品を購入した履歴を保存する。

この間にクライアントは指定された「ご購入ありがとうございます」画面に遷移している。

後はお好きなように。Stripeにはもっともっと追加機能があるのでお楽しみください。

こう書くと、とても単純なようでこんなのに頭を悩ませたのがバカみたいに思えるかもしれない。でもな、このフローを理解するには何個もある項目を全部読んで最後の最後に分かるんよ。ほんと不親切だと思うわ。

Stripe自体がいいサービスだから、なんとかガマンできるけど。

ただこれをお読みのあなたは大丈夫。きっと上記の内容が頭に入っていたら何十倍も速く理解できるはず。

ということで「Stripeの公式ドキュメントを読む前に理解しておくべきこと」でした。

関連記事


海外移住のQ&Aサイト シティーズ


海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。

シティーズ https://www.cityz.jp/


cityz



  • © copyright jabba.cloud 2020