#Hugo

September 30, 2023

Squareで投げ銭ボタンを作ってみた

このブログは一応ジャンル問わずなんでも書くつもりで作っているのですが、なんだかんだ技術記事が多くなっているので広告の表示は控えてはいるのですが、まぁお金は欲しいよねってことで、余裕のある人がお気持ちで投げ銭してくれれば良いやという気持ちで寄付ボタンを追加してみることにしました。

Squareに登録する

まずはSquareの登録をします。

Square（スクエア）| 初期費用無料のキャッシュレス決済、POSレジシステム

Square（スクエア）のキャッシュレス決済はクレジットカード、QRコード、電子マネーの幅広い支払い方法に対応。無料で使い始められるPOSレジに加え、ネットショップ、顧客管理、在庫管理、予約管理など、たったひとつのアカウントで店舗運営に関わるあらゆるツールがそろうビジネスソリューションです。
https://squareup.com
  • 名前
  • 生年月日
  • 電話番号
  • 住所
  • 振込用の銀行口座
  • 事業内容
  • 免許証などの書類
  • WEB経由の顔認証

などの登録が必要になります。
最初は入力が面倒ですが、一度登録してしまえばすぐに使えるのでサクッとやってしまいましょう。

さすがSquareというだけあって、登録フローはとてもスムーズで楽でした。素晴らしいUX

寄付フォームを用意する

追加方法がわかりづらいですが、
ホームのアクションに寄付をお願いするボタンがあるので、そこをクリックします。

square create donate

今回は、投げ銭用途なので支払いリンクを追加します。

square donate settings

これだけで寄付用のリンクが生成できました！
簡単！

Hugoに設置

Squareではリンクが発行されますが、QRコードもありますし、埋め込みのデザインされたボタンも用意されています。もちろんカスタマイズも可能です。
これでも十分なのですが、今回はHugoに埋め込んでいきます。

要件としては、

  • ブログの記事ごとに埋め込みたいものと埋め込みたくないものを分けたい
  • configに環境変数としてSquareのリンクを設定したい

になります。

CSS

次に対応するCSSを追加します。
デザインは人それぞれなので参考程度で

ベースはこちら を参考にさせて頂きました。

.donate {
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 1rem;
}

a.btn-donate {
  align-self: center;

  font-size: 1rem;
  font-weight: 700;

  position: relative;
  padding: 1rem 6rem;

  color: #fff;
  border-radius: 100vh;
  background: #eb6877;
  -webkit-box-shadow: 0 5px 0 #e85163;
  box-shadow: 0 5px 0 #e85163;

  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.btn-donate i {
  margin-right: 0.5rem;
}

a.btn-donate:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background: #ee7f8b;
  -webkit-box-shadow: 0 2px 0 #e85163;
  box-shadow: 0 2px 0 #e85163;
}

Config

私はtomlファイルに記述しているので、追加したCSSと、環境変数を定義します。

[params.assets]
customCSS = [
...
"css/donate.css",
...
] 

[params]
SquareDonateLink = "https://square.link/u/****"

HTML

partialsに donate.html を追加します。
tomlで追加した変数は .Site.Params.***** で参照できます。

<section class="donate">
  このブログが役に立ったら
  <a class="btn btn-donate" href="{{ .Site.Params.SquareDonateLink }}" target="_blank">
    <i class="fas fa-heart"></i>
    サポートする
  </a>
</section>

呼び出し側

呼び出し側は追加したpartialを読み込むだけです。

{{ partial "donate" . }}

記事ごとの設定はこんな感じでtrue, falseを設定しましょう。


---
title: ****
date: ****
...
donate: true
...
---

まとめ

以上で投げ銭ボタンが完成しました！！ とても簡単に投げ銭ボタンが作れますね。もっと早く追加すればよかったと思いました。

ちなみに、こんな感じのボタンが各記事に追加されています。

donate button

もしよかったら記事下のボタンからお気持ち寄付をくれると嬉しいです！

Similar articles:

© AAkira 2023