page icon

Stripeの料金表をNotionに埋め込みサイト表示!

タグ
ノーコード
Notion関連
説明
関連リンク
進行度
Done
JP_Stripes Advent Calendar 2022 17日目
 
平素は大変お世話になっております。
NotionアンバサダーのNotionおばさんです。
TwitterでNotionアンバサダーとして活動しております。
簡単すぎるNotionおばさんのプロフィール
  • Notionアンバサダー
  • 一児の母
  • 個人事業主
    • Notionオンラインサポート
    • ベビーシッター
  • 非エンジニア
  • Notion大好き!ノーコード大好き!
 
この度hidetakaさんからTwitterでお声掛けいただき、Stripeのアドベントカレンダーに参加させていただき大変緊張しております~
 
※文章を書くことが苦手なので、中々読みにくいと思いますがサラッと見て頂ければ幸いです。
 

Stripeを利用している経緯

先ず、「なんでNotionおばさんがStripe利用しているのか?」というところをサラッと!
 
私は個人事業主でして、業務委託でお仕事をしています。
なので、色々なプラットフォームにサービスを出して仕事を請け負ったり(コ○〇ラやス〇〇カ等々)、今回のようなTwitterからお声掛けいただいたり、中には私のホームページからもご依頼があります。
 
 
上記のホームページからの「お問い合わせフォームからのご依頼」をもう少し簡単にできないのもかと考えて、いろいろ使ってみて、たどり着いたのがStripeさんでした。
 

Stripeの料金表をNotionに埋め込みサイト表示!

ここからが本題!
 
Stripeは以前「Payment links」しか利用していませんでしたが、最近になって
 
料金表が簡単に出来る!
 
と知り、使ってみると本当に簡単にできて感動しました!
※作り方はこちらを参照
 
しかも埋め込みもできるとあれば、埋め込みたくなります。。。
(てか、料金表いつできるようになったんや、、、以前はなかったような。。。🤔)

Notionをサイト化できる「Wraptas」の機能を利用して埋め込み

じゃあ、どうやって埋め込みしようかと考えましたが、、
Notion本体に直接Scriptは埋め込めてもコード表示になってしまい、料金表は出てきません。
こんな感じ、、、
こんな感じ、、、
 
でも、以下のサービスをつかえばできることが分かりました。
 
Notionページをサイト化してくれる便利なサービス!!!
Notionページをサイト化してくれる便利なサービス!!!
 
私のサイトを見てお気づきかとは思いますが、私のサイトはNotionで作っていて、WraptasというNotionをサイト化するサービスを利用してサイト化しています。
そのWraptasで何かないかなと機能をみていたところこんな記載がありました👇
 
注目は黄色の線!!!!!!!!
注目は黄色の線!!!!!!!!
 
これならいけるはず。。。。
ということで、早速埋め込んだらあっさり料金表を表示してくれて、なんか嬉しくて2度見しました~~😅
サイトはこちらの料金表が表示されています!!!!
サイトはこちらの料金表が表示されています!!!!
 
大事なのでもう一度。
 
これが………
こう!!!!!
 
嬉しくてこんなツイートも!

CTA(コールトゥーアクション)ボタンもできる!

これも実装してみました!
Stripeの料金表作成にCTAボタン作成も出来ると聞き、以下のツイートのようにしてみました!
機能リストも追加しています!
 

個人的なお気に入りポイント

 
  • 埋め込んだら即反映!!!!
  • 料金変更も即反映!!!!!!
  • しかも動的でスタイリッシュ!!!!
 
もう言うことはないです(大満足
 

まとめ

Stripeの料金表はかなり便利なのではと思います。
少なくとも私みたいな
「非エンジニアだけど自分のホームページから集客したい方」
には簡単に料金表実装できて、しかもそこから支払いまで完了できて、とても大変助かる(ありがたい
次はApple Pay の実装に取り組んでいきたいなぁ
 
Stripeさん、引き続きよろしくお願いいたします。