🔖

Stripe + Herokuで決済サービスを作る時のメモ

2020/12/10に公開

Heroku

はじめ

Stripeという決済サービスを使って、支払いだけのページを作成しました！
その時のメモを残しておこうと思います。
今回はStripeの登録方法は割愛します!

ソースコード取得する
herokuを使う

実装環境(html/css/js + node.js)

1. ソースコード取得する

下記からソースコードをダウンロードする。

必要でしたら、githubで新しいリポジトリを作ることもありです。
支払い金額が1つだけでしたら、そのまま進めてください！
複数ある場合は、checkout.htmlを編集します
変更前

      fetch("/create-session", {
        method: "POST",
        headers: headers,
      })

変更後

let headers = new Headers({ "Content-Type": "application/json; charset=utf-8", "money": 1000 });
      fetch("/create-session", {
        method: "POST",
        headers: headers,
      })

にします。

headerにあるので、server.jsの19行目を

unit_amount: req.headers["money"],
にします。

これで今回は複数対応しました。
他にいいやり方があったら、教えてくださいm(_ _)m

2. herokuを使う

herokuのアカウントを作ります。
ここの説明も割愛します。
その後に、server.jsの対応をします。

1行目 → Stripeの本番Key
6行目 → herokuのURLを設定します。
7行目 → const port = process.env.PORT || 4242;

します!
それに加えて、最後の行を下記のように修正しました。
変更前

app.listen(4242, () => console.log('Running on port 4242'));

変更後

app.listen(port , ()=>{
  console.log('server listened by port ' + String(port) + ' ...');
});

あとは、多分herokuに投稿するだけです！！
https://jp.heroku.com/nodejs

実際公開しているのは、こちらになります〜〜
参考までに
https://castle-pay.herokuapp.com/

ぜひ楽しい課金Webページ作成を〜〜

はじめ

1. ソースコード取得する

2. herokuを使う

Discussion