Stripe 決済方法

Stirpeで決済の画面を表示させるAPIは以下の4つがある。

1. 1.PayMent Links
2. 2.Checkout
3. 3.ELEMENTS
4. 4.API

決済方法

オススメは、PayMent Linksでノーコードででき、サーバーを用意する必要が無いので簡単に構築できる。
ランニングコストも考えなくて済むので可能な限りPayMnet Linksだけで済ませたい。

サーバが必要なAPI

その他３「Checkout , ELEMENTS , API」はクライアントはもちろんの事、サーバー側のコードも必要になってきます。そのため、クライアントとサーバーの両方の知識が必要になるので実装のコストが発生する。
特に、ELEMENTSと、APIを使えば、リダイレクトをさせる必要が無いが、その分決済フォーム、トークン、認証、UIのほとんど全て機能を実装する必要があるため、かなりのボリュームになってしまう、コードを書くとしてもCHECKOUTを使用する方がいいと思われる。

目標

今回は、3つの中でも比較的簡単に実施するCHECKOUTと言う物を今回使用して行きます。
サーバーとクライアントの両方が必要なため、Nextjsを使ってコードを書いて実装します。

CHECKOUTは何ができるか？

サーバー側を用意するので自由に構築できると思われるが、良さそうな機能があまりない。
CHECKOUT APIを使うことでstripeの顧客IDを含めることができる。そうすると顧客管理、メタ情報を入れることや、支払い方法指定等、他には、商品種類と数、請求先住所、この請求先の有効期限 等々が可能になる。
要するにPayMent Linksを動的に生成できる物です。そのため、有益な機能としてはかご機能を実装できる、顧客管理ができる２点ぐらいかと思う。

CHECKOUTとは関係はありませんが、stripeはWEB hookもが提供しているので、特定のイベントが発生した際、サーバーにイベントを飛ばすことができるので、LINEに通知等することができます。

CHECKOUTの流れ

まず必要なのはクライアント(webページ)、自サーバー、そして、Stripeサーバーの3つが必要になります。
Stripeサーバーはstirpeのページからトークンと、SDKを使うことで比較的簡単に接続することができます。そのため、作成が必要なのはウェブページと自サーバーの２つです。

CHECKOUTはどのように動作しているのか？

まず、CHECKOUTは何をしているのかと言うと、 自サーバーが、Stripeのサーバーに商品と数量、支払い方法等を投げて、決済ページを生成してくれます。

そのため動作の流れはクライアント側(webページ)で商品のID(Price)と個数を自サーバーに投げて、自サーバーはそのデータを受け取り、Stirpeサーバーに情報を投げて、stripeサーバーは決済ページを作ってくれるので、その決済ページのURLをクライアントにリダイレクトさせます。

1. 1.クライアント側で商品と個数を自サーバーに投げる
2. 2.自サーバーがstripeサーバーに情報を投げ、決済ページを作成する。
3. 3.自サーバーが情報を受け取り、決済ページのURLをクライアント側に渡す
4. 4.クライアントは決済ページにリダイレクトし、支払いをする

CHECKOUTを使う

CHECKOUTのAPIを使うにはサーバーStriepのSDKをインストールする必要があります。
クライアント側は今回あまり触れません。

install

Nextjsのインストールと、Stripeのサーバー用ライブラリーをダウンロードします。

npx create-next-app@latest

ディレクトリーを移動し、サーバー用のstripeライブラリーを追加する。

npm install --save stripe

コードを書く

Stripeはクライアントと、サーバーの両方必要ですが、この例ではサーバーが動けば良いだけなので、クライアントはただサーバーに意味のないPOSTをするだけになっています。
かごの機能を実装するためには、このPOSTで商品のPriceをサーバーに渡してあげれば実現できます。

'use client'
import Image from 'next/image'

export default function Home() {

  return (
  <div>
      <div>
        <div>
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
        <form action="/api/checkout" method="POST">
      <section>
        <button type="submit" role="link">
          Checkout
        </button>
      </section>
      </form>
  </div>
  )
}

サーバー側

// create invoice api
import { redirect } from 'next/navigation'
import Stripe from 'stripe';
const stripe = new Stripe(process.env.NEXT_SECRET_STRIPE_KEY , {})


export const POST = async (req, res) => {
    const session = await stripe.checkout.sessions.create({
        line_items: [
          {
            price: 'price_1OI3vzHyOzm36Oanab5UKo0O',
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: `http://${process.env.YOUR_DOMAIN}/success.html`,
        cancel_url: `http://${process.env.YOUR_DOMAIN}/cancel.html`,
      });
      console.log(session.url);
   redirect(session.url)
}

変数を用意する

Stripeのシークレットキー、パブリックキー、ドメイン用の環境変数を用意します。

NEXT_SECRET_STRIPE_KEY = sk_test_51ABCDg380byOzm34OanXltecoWtlZX2fY7q9g2JdFpoHJRmmDlLafach2oT031JwC2f4MqdpcPmDUFLLIpXMsMCT00Tg7QVnEP
NEXT_PUBLIC_STRIPE_KEY = pk_test_51ABCDg380bOzm34OanHFUgJjJsLVPdJj85xXUAKnogY9wXWDaymZ2Npun37cTRancQi6A7tjn2mAiSkZp7ajsWY006nPORoGq
YOUR_DOMAIN = "localhost:3000"

シークレットキーとパブリックキー

今回はシークレットキーのみ必要です。シークレットキーは ここから確認してください。

priceID

lineitemsに必要なのは商品のpriceとquantityです。
priceを確認するためには商品カタログ->商品ページを確認すると表示されています。

決済ページを作る

決済ページを作るコードは stripe.checkout.sessions.createです。 このコードを使用する為に最低限必要なものは3つです。

• success_url
• line_items
• mode

success_url

支払いページの生成が成功した後にリダイレクトされるURL

mode

支払い、情報の登録、サブスク 支払いの方法

line_items

配列で、商品の固有IDと個数を入れます。
商品の固有IDはつ存在しますが、使うのは基本price IDです。

テスト用

Nextjsのpost apiは次のようになります。

import { redirect } from 'next/navigation'
import Stripe from 'stripe';
const stripe = new Stripe(シークレットキー)
export const POST = async (req, res) => {
    const session = await stripe.checkout.sessions.create({
        line_items: [
          {
            price: '商品の固有ID',
            quantity: 個数,
          },
        ],
        mode: 'モード「登録、支払い、サブスク」',
        success_url: `成功時のリダイレクト先`,
      });
      console.log(session.url);
   redirect(session.url)
}

まとめ

stripeのCHECKOUTを使うことで、決済ページを動的に作成することができるので、Payment Linkを毎回作成せずに自由に商品と個数を含めた決済ページを作成することができます。 次回は、かご機能を含めたクライアントページを作成します。