Stripe / Next.js / AWSによる Headless WordPress活用法 Shifter ミートアップ！Shifter Headless ではじめる Headless CMS 入門 Hidetaka Okamoto(@hide__dev) 2022/02/25

岡本 秀高 ( @hide__dev ) ● Stripe Developer Advocate (ex-developer in Digitalcube) ● JavaScript / TypeScript developer ● AWS / Next.js / WordPress / etc… ● WordCamp Kyoto 2017 / JP_Stripes Connect 2019 / AWS Samurai 2017 / etc… ● 🐈（猫フラご容赦󰢛） 2 ジャムジャム！！Jamstack_5 #JP_GetShifter

3 https://stripe.com/jp

4 決済だけでなく決済周辺の機能もご利用可能 Stripe のプロダクトスイート Payments Checkout Radar Billing Connect Terminal Issuing Payouts Capital Corporate Card Treasury オンライン決済 構築済み決済 UI 不正使用とリスクの管理 サブスクリプションの管理 プラットフォーム向けの決済 Climate Sigma Atlas 収益の一部で CO2 除去に貢献 カスタムレポート Identity 決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行 オンライン請求書 Invoicing BaaS 支出管理 ビジネスの資金調達 海外への入金 カード作成 Tax 消費税と VAT の自動計算 オンライン本人確認 スタートアップの企業設立 対面支払い （日本未展開）

Low Code / No Codeで、決済リンクが作れる 5 Shifterミートアップ #JP_GetShifter const session = await stripe.checkout.sessions.create({ mode: "payment", success_url: `${req.headers.origin}`, cancel_url: `${req.headers.origin}`, line_items:[{ price: req.body.price_id, quantity: 1 }] }) return session.url

6 じゃあ、なにで決済はじめるの？ Shifterミートアップ

有料コンテンツ WordPress <> Stripeの例1: ※画像は、Stripeの導入事例ではありません

E-Commerce WordPress <> Stripeの例2: ※画像は、Stripeの導入事例ではありません

Marketplace WordPress <> Stripeの例3: ※画像は、Stripeの導入事例ではありません

WordPressとStripeの「役割分担」 10 WordPress Stripe 主に取り組むこと ● コンテンツの管理・カスタマイズ ● ライター・編集者の管理 ● 入稿画面の管理・カスタマイズ ● サイトの表示管理・カスタマイズ ● 価格・商品管理 ● 顧客情報管理 ● 安全な決済フローの提供 任せたくないこと ● 決済に関わる情報の管理 ● 顧客の個人情報の保持 ● サイトの表示に関する データの管理 Shifterミートアップ

WordPressに集約しつつ、決済だけStripe 11 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend Developer Store Manager Stripe Backend Developer

WordPress(とサーバー)に問題が起きた場合は？ 12 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend Developer Store Manager Stripe Backend Developer

WordPressが落ちると、全てが停止する 13 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend Developer Store Manager Stripe Backend Developer

全てがWordPressにある「リスク」 ● 様々な職種の人が、 管理画面にアクセスする ● 意図しない情報アクセスを 防ぐための権限設定 ● 関係者が増えるごとに複雑化 ● 複雑化による不整合・バグ ● WordPressは、 コンテンツの中身に 集中させたい 14 Shifterミートアップ #jamjamjamstack

15 役割分担で、リスクを減らす Shifterミートアップ

WordPressの役割・関係者が多すぎる 16 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend Developer Store Manager Stripe Backend Developer

ので減らす 17 Shifterミートアップ #JP_GetShifter Customer AWS (Amplify) Writer / Editor Frontend Developer Store Manager Stripe Backend Developer AWS (Container) WordPress Next.js

より役割が明確に 18 役割 関係者 WordPress ● コンテンツの管理・カスタマイズ ● ライター・編集者の管理 ● ライター ● 編集者 ● 管理者 AWS ● アプリのインフラ ● CDNやバックエンド処理 ● バックエンド開発者 ● システム管理者 Stripe ● 決済に関わる情報の管理 ● 顧客の個人情報の保持 ● マーケティング・販売 ● 商品管理・経理 Next.js ● サイトの見た目 ● コンテンツの表示 ● デザイナー ● フロントエンドエンジニア Shifterミートアップ

All in one WordPressと、役割分担システム 19 All in one WordPress 役割分担システム メリット ● すべてWordPressで管理できる ● プラグインがあればノーコード ● この手法に慣れた会社や 製作者はとても多い ● 障害時のリスク分散 ● 部署・役割ごとの権限管理 ● 自由度の高いシステム開発 デメリット ● １つの障害で多くが止まる ● WP内での複雑な権限管理 ● カスタマイズに＋αで プラグインの仕組み理解が必要 ● 使うSaaSやアプリが増える ● ほぼフルスクラッチ開発 ● WP界隈では、枯れてない Shifterミートアップ

20 Headless WordPressへの道 Shifterミートアップ #JP_GetShifter

「WordPressはただのAPI」への意識改革 ● 「コンテンツの中身」を 管理する場所がWordPress ● テーマやウィジェットは 基本使わない ● WP APIのカスタムで、 対応は可能 ● JSとWP両方で 見た目を管理すると、 後々運用がつらくなる 21 Shifterミートアップ #JP_GetShifter

export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } URLのルーティングから設計する ● JSフレームワークに WPみたいな柔軟なRouterはない ● スクリプトまたはファイルで、 サイトのURL構造を決める ● 後から変更するなら、 ファイルまたはコードを変更 22 Shifterミートアップ #JP_GetShifter

import { getNextStaticProps } from '@faustjs/next'; import { client } from 'client'; export default function Home() { const { usePosts } = client; const posts = usePosts({ first: 6, }); … WP_Postから離れて、WP API/WP GraphQLへ ● WP APIまたはWP GraphQL ● ネットワーク経由で、 記事データを取得 ● APIリクエストを、 自分で書く必要があることも ● 今からやるなら、 Faust.jsでHookを使うのが無難 https://faustjs.org/docs/next/ref erence/hooks/usePosts 23 Shifterミートアップ #JP_GetShifter

24 Stripe <> Next.js + WordPress Shifterミートアップ

NextAuth.js: 認証周りの汎用ライブラリ ● 複数の認証プロバイダを 併用できる ● メール / Apple / Google Auth0 / etc… ● プロバイダごとの方言を ライブラリが翻訳してくれる ● 実装コードは同じで、 プロバイダ部分だけ 案件ごとに差し替えも可能 https://next-auth.js.org/ 25 Shifterミートアップ #JP_GetShifter

Next.js Example: with-stripe-typescript ● Stripe公式サンプルが Next.js側Examplesに移動した ● Checkout / Elements両方に 対応 ● カート機能のサンプルもあり ● Next.jsでStripe使うなら、 まず試しておきたい https://github.com/vercel/next.js/tr ee/canary/examples/with-stripe-ty pescript 26 Shifterミートアップ #JP_GetShifter

use-shopping-cart ● 前述のサンプルで一部利用 ● カート機能のための React Hookライブラリ ● Checkoutへの遷移もサポート ● Hookだけなので、 JSXは自由にかける https://useshoppingcart.com/ 27 Shifterミートアップ #JP_GetShifter

Headless WordPressでいくかいかないか ● 絶対の正解は絶対ない ● 分散管理できるため、規模の大きい・関係者の多いPJのほうがよいかも ● WordPressではなく、 Next.js / Gatsbyなどのライブラリとカスタマイズで、見た目を調整する。 ● StripeやAWS AmplifyなどのSDKをフル活用しやすいので、 SaaSアプリやマーケットプレイスなど、広告以外のマネタイズを目指す場合にもよい ● 初動の早さはNo Headlessが勝ちやすい。 もし課金を始めるなら、この段階からAmplifyやStripeを使うと、 Headlessや脱WordPressもやりやすいので、（個人的には）おすすめ。 28 Shifterミートアップ #JP_GetShifter

Thanks! ● Twitterハッシュタグでシェア #JPGetShifter ● Twitterアカウント: @hide__dev @StripeJapan ● QiitaでStripeに関する 開発ブログ更新中 https://qiita.com/organizations/stripe 29 Shifterミートアップ