Stripeでオンライン決済した後のダウンロードページの作り方


Silicon Valley Super Ware

2020年9月17日




Stripeでオンライン決済した後のダウンロードページの作り方

Stripeでオンライン決済をした際のダウンロードページの作り方について触れておきます。

今回紹介している方法は、Stripe側で事前に用意したユーザーインターフェースを利用しています。したがって、決済が完了した後に表示するページのURLはセッションを作成する際に指定する必要があります。

ここで考えなくてはいけないのは、複数の商品（サービス）を販売する場合、提供するファイルへのリンク先も異なります。決済が終わった後にそのページが呼び出される際に何を表示するかを事前に決めておく必要があります。

Stripeが提供する方法は？


Stripeの開発者向けの記事を読むと紹介されている一つの方法は、「クエリーパラメータ」を指定する方法です。

要は、URLの最後に「?session_id=XXXX」の様に、セッションIDの情報を渡す方法です。この方法を使うと、表示する際にセッションIDを基に販売した商品（サービス）情報を取得して、必要なダウンロード情報を表示するという方法が一番簡単です。

先日の全体の流れの時の説明では詳しい事を書いていませんでしたが、バックエンドからセッション情報を受け取ってStripeの決済画面を呼び出す前に、商品情報とセッション情報をFirebaseに残すようにします。

決済が完了（成功）した場合は、クエリーパラメータと一緒に指定したページが呼び出されるので、Vueルータでクエリパラメータを読みだして、商品情報を基にページを作成すれば商品、ユーザーごとのダウンロードページの作成が可能です。

Vueで記述する場合は、「created」の所に以下のような記述を書けば、セッションIDを取得できます。
created: function() {
    console.log("create");
    console.log(this.$route.query.session_id);
  },

この方法が比較的簡単に個別のダウンロードページを作成する方法になります。

Firebaseはデータベースの利用ができるので値の受け渡しも簡単です

別の方法としては、Firebaseではなく、VUEXの方にセッション情報を残して対応する事も可能ですが、インターネット接続が遮断されたり、ブラウザーを閉じてしまった場合などは情報が失われる可能性があるのでおすすめしません。

バックエンドで対応する方法

オンライン決済処理をするために、バックエンドサービスを導入しているので、別の方法としては、バックエンド側でダウンロードページを用意する方法もあります。

この場合も、Stripeの決済画面の処理が成功した場合、一緒にセッションIDをクエリーパラメータとして送って、バックエンド側でこの情報を読み取ってダウンロードページを作成するという方法が利用できます。
 this.app.get("/download", async (req, res) => {
      // Gets the session information
      const sessionId = req.query.session_id

Expressを利用している場合は、ルーティングの処理で「/download」が呼ばれた場合に、リクエストのメッセージから、クエリーパラメータを取り出す事ができます。

この方法はセキュリティ上有利です！

フロントエンドで処理する場合、Firebaseのデータベースアクセスのコードはブラウザーから閲覧可能になるので、セキュリティールールをしっかり設定する必要がありますが、バックエンドで処理する場合、データベースアクセスはフロントエンドからは見られない様にできるため、Firebaseのセキュリティルールの設定は簡単ですみます。

バックエンドサイドでレンダリングする方法としては、NUXTやNEXTを含めていろいろありますが、ダウンロードページの作成だけならば、ExpressとExpress-Handlebars（express-handlebars）を使うともう少しシンプルなコードでバックエンド側のレンダリングが可能です。

詳細は、別途説明の投稿を書こうと思いますので今日は紹介だけにします！

クエリーパラメータがない場合

バックエンドで、オンライン決済が成功した場合と失敗した場合の表示するページは、バックエンドがセッションをリクエストする際に送ります。

// Requests a check out session
        const session: any = await stripe.checkout.sessions.create({
          payment_method_types: ["card"],
          line_items: [
            {
              price_data: price_data,
              quantity: 1,
            },
          ],
          mode: "payment",
          success_url: URL + "download?session_id={CHECKOUT_SESSION_ID}",
          cancel_url: URL,
        });

成功した場合は、必ずセッションIDを埋め込むように指定します。
つまり、セッションIDがURLに含まれていない場合はエラーにします。

上の例では、商品選択ページ（「URL」）にリダイレクトしています。

こうする事で、支払いを完了した場合のみにダウンロードページを表示できます！

あとは、ダウンロードのリンクを取得して、それをダウンロードページのHTMLに埋め込めば良い事になります。

ダウンロードのリンクは注意が必要なのは別の投稿で紹介した通りです。

FirebaseのStorageのAPIを使ってダウンロードのURLを取得した場合はそのリンクは誰にでも有効で、有効期限もありません。それで問題ない場合はこれを使っても問題ありません。

しかし多くの場合では、リンクの有効期限を設定した方が良い場合が多くなります。
その場合の方法は

こちらで解説してますので参考にされてください。


シリコンバレースーパーウエアでは、フリーランスの方だけではなく、プログラミングを職業とされる方にビジネスを意識した マインドセットを身に着けるお手伝いも提供しています。プログラミングは手段であって、それをどのように生かして、将来のキャリアに結び付けて行くかを長期的な視点で考えるのがとても大切です。この意識が出来ると勉強の方向も絞られて、あなたの夢を実現する道筋が見えてきます。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

コメント

コメントを投稿

このブログの人気の投稿

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。 ...
続きを読む

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea...
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text...
続きを読む