ブログの有料記事を実装しました

Authors

• 

  Name

  Shou Arisaka nyapp.buzz/shou

  short bio

  Z世代の情報技術者。Next.jsで自作SNSを個人開発中。

当ブログ内で試験的に有料記事を書きはじめました。note.comの「この続きをみるには」のようなものではなく、文章の一部一部が読めない構造です。

お支払い方法には信頼の置けるペイメントサービスプロバイダーであるStripeを採用し、クレジットカード他、Apple pay、Google payなどで支払えます。

会員登録などは必要なく、2クリックで支払い、ライセンスコードの取得までできます。 また購入後にはゲストアカウントが自動で作成され、自動生成されたメールアドレスとパスワードでログインできます。 ログインすると購入したサービスの一覧などが確認できます。

以下は有料記事の体験版サンプルです：

この記事で使用できるライセンスコードを準備しておきました。 以下のライセンスコードを入力すると見れるようになります。

以下に購入までの一連の流れを画像付きで紹介します。

支払いモデルのネットワーク図：

まず、ユーザーは記事を見つけます。 有料記事ではライセンスキー認証のカードが表示され、隠れた文字についてはその文字数をカウントして"(n文字)"のように表示されます。

上記の"購入する"リンクをクリック(タップ)すると、次のような支払い確認ページに移動します。

画面の青色の次へ進むボタンを押すと、Stripeの支払いページへ移動します。 支払いはGoogle Pay、Apple Pay、クレジットカードなどが可能です。

支払いが正常に完了すると、すぐにライセンスキーが発行され、画面に表示されます。

記事に戻り、発行されたライセンスキーを入力して画面黄色の"Send"ボタンを押して送信します。

隠れた文字が表示され、有料記事が見れるようになりました。