Stripe決済をホームページに貼る方法|非エンジニア社長がAIと本番化した実録

お知らせ

ホームページで「売りたい」のに、決済でつまずく

「ホームページで商品やサービスを直接売りたい。でも、決済の仕組みを入れるのが難しそうで、ずっと後回しにしている」——中小企業のWeb担当者や経営者の方から、この相談をよく受けます。

気持ちはよくわかります。決済導入と聞くと、多くの人がこんなイメージを持っているからです。決済代行会社と契約書を交わし、審査に何週間もかかり、エンジニアにお金を払ってサイトに組み込んでもらい、動かなかったらまた費用がかかる——。実際、僕自身も長いことそう思い込んでいました。

僕はハンズバリュー株式会社の代表であり、ITコーディネータとして中小企業のホームページ活用を支援してきました。非エンジニアです。それでも、AIコーディングツールのClaude Codeを使って自社プロダクトを19個作り、そのうち15個を本番で稼働させています(2026年7月18日時点の社内棚卸し実測です)。

その僕が、2026年7月、自社で運営している英語観光メディア「Deep North Japan」に、初めてカード決済を導入しました。かかった時間は、実質1日。書いたコードは、ホームページに貼るボタン1行だけです。この記事では、そのときの実際の流れと、あなたのホームページにそのまま貼れる決済ボタンのコードを、包み隠さず公開します。

先に結論を言っておきます。決済導入で本当につまずくのは、技術ではありません。もっと地味な、ある「手続き」です。この記事の後半で、その正体もお話しします。

結論:決済リンクは「開発ゼロ」で貼れる

まず、いちばん誤解されているところを解きます。今の決済サービスは、プログラムを書かなくても、ホームページに決済ボタンを付けられます。

僕が使ったのはStripe(ストライプ)という決済サービスの「Payment Link(ペイメントリンク)」という機能です。仕組みはとてもシンプルです。

  1. Stripeの管理画面で「この商品を、この値段で売ります」と登録する
  2. すると https://buy.stripe.com/○○○○ という支払いページのURLが1本発行される
  3. そのURLを、ホームページのボタンやリンクに貼るだけ

これで完成です。お客様はそのボタンを押すと、Stripeが用意したきれいな支払いページに飛び、カード番号を入れて支払います。カード情報はStripe側で安全に処理されるので、あなたのホームページがカード情報を預かることはありません。ここが重要で、セキュリティ対策も自前で作らなくていいのです。

「サイトにプログラムを組み込む」のではなく、「Stripeが作った支払いページへ、リンクを1本張る」。この発想の転換が、決済導入のハードルを一気に下げてくれます。ネットショップの仕組みをまるごと作るのではなく、商品1つを売るためのリンクを1本持つ、というイメージです。

【実録】非エンジニアがAIと決済を1日で本番に載せた流れ

抽象的な説明だけでは伝わりにくいので、実際に僕がやったことを時系列で書きます。

Deep North Japanは、東北をテーマにした英語の観光メディアです。その中で、僕が実際に走ったサイクリングルートのGPXデータ(自転車のナビに読み込むルートデータ)を無料で配り、走り切った人には「完走証明書」を12ドルで発行する、という小さな商品を始めました。海外の読者が対象なので、ドル建てです。

やったことは、大きく4ステップでした。

1. Stripeの管理画面で商品を作る——「Finisher's Certificate(完走証明書)」という商品を、12ドル・一回きりの支払い、という設定で登録しました。ここは画面の項目を埋めるだけで、5分ほどです。

2. Payment Linkを発行する——登録した商品を選んで「リンクを作成」を押すと、支払いページのURLが1本出てきます。このとき、お客様のメールアドレスを集める設定をオンにしておきました。証明書のPDFを送る宛先になるからです。

3. ホームページのボタンに貼る——サイトの「完走証明書を申し込む」ボタンのリンク先を、発行されたStripeのURLに差し替えました。僕のサイトはHugoという仕組みで作っていますが、これは後述するとおり、WordPressでもまったく同じ考え方でできます。書いたコードは、リンクを差し替えるボタン1行分だけです。

4. 動作を確認して本番へ——ボタンを押して、支払いページが正しく表示されるか、商品名と金額が合っているかを確認して完了です。

この一連の作業を、僕はAIコーディングツールのClaude Codeと対話しながら進めました。「この商品の決済リンクを、このボタンに貼って」と日本語で指示し、AIがコードを書き、僕が本番サイトへの反映まで見届ける。非エンジニアの僕が単独でやったら半日は調べ物で溶けていたはずの作業が、実質1日で本番稼働まで到達しました。

大事なのは、AIがやったのは「作業」であって、「判断」は全部こちら側だという点です。どの商品を、いくらで、どんな導線で売るか——これは経営の判断で、AIには決められません。AIは、決めたことを速く形にしてくれる相棒です。

「決済を入れたいけれど、自社でやる時間も人もいない」——そう感じていませんか?

僕たちは、こうしたAI活用のノウハウを自社プロダクト群として商品化し、ホームページ制作のお客様に提供しています。決済導入を含め、御社のホームページを「働く仕組み」に変えるお手伝いができます。


接客AIクラウドを見る →

【コピペ可】決済ボタンをホームページに貼る具体的なコード

ここからが本題です。あなたのホームページに決済ボタンを貼るための、具体的な手順とコードを載せます。ダミーのURLを使っているので、https://buy.stripe.com/あなたのリンク の部分を、ご自身のStripeで発行したURLに差し替えて使ってください。

① Stripeで決済リンクを発行する(開発ゼロ)

まず、貼るためのURLを用意します。プログラムは一切書きません。

  1. Stripeにアカウントを作る(無料。事業者情報の登録が必要です)
  2. 管理画面の「商品カタログ」で「商品を作成」を選び、商品名・説明・金額・通貨を入力する(日本国内向けなら日本円=JPYを選びます)
  3. 一回きりの支払いなら「一回限り」、月額の会費などなら「継続(サブスクリプション)」を選ぶ
  4. 保存したら、左メニューの「決済用リンク」から、その商品を選んで「リンクを作成」を押す
  5. お客様のメールアドレスを収集する設定をオンにしておく(領収書やデジタル商品の送付先になります)
  6. 発行された https://buy.stripe.com/○○○○ というURLを控える

これで、貼るための「弾」ができました。

② どんなサイトにも貼れる汎用HTMLボタン

次に、そのURLをボタンの形にします。以下が、HTMLが使えるサイトならどこにでも貼れる汎用のボタンコードです。実際に僕が本番サイトで使っているものを、汎用化したものです。

<a href="https://buy.stripe.com/あなたのリンク"
   target="_blank" rel="noopener"
   style="display:inline-block;padding:14px 32px;
          background:#2c5f2d;color:#ffffff;
          font-weight:bold;text-decoration:none;
          border-radius:8px;font-size:1.05em;">
  カードで購入する(1,800円)→
</a>

3か所だけ、あなたの内容に合わせて書き換えます。

  • href="https://buy.stripe.com/あなたのリンク" → ①で控えたStripeのURL
  • カードで購入する(1,800円) → ボタンに表示したい文言と金額
  • background:#2c5f2d → ボタンの色(この記事のサイトの緑色です。お好みの色コードに)

target="_blank" は、支払いページを別タブで開く指定です。rel="noopener" はセキュリティ上の作法なので、そのまま残してください。

③ WordPressに貼る手順(カスタムHTMLブロック)

多くの中小企業のホームページはWordPressで作られているので、WordPressでの貼り方を具体的に書きます。

  1. 決済ボタンを置きたい固定ページや投稿の編集画面を開く
  2. ボタンを入れたい場所で「ブロックを追加(+マーク)」を押す
  3. ブロックの一覧から「カスタムHTML」を選ぶ
  4. 表示された入力欄に、②のHTMLコードを貼り付ける
  5. ブロック上部の「プレビュー」に切り替えて、ボタンの見た目を確認する
  6. ページを更新(公開)する

これだけです。プラグインの追加も、テーマの編集も要りません。「カスタムHTML」ブロックは、WordPressに最初から入っている標準機能です。

もし「ボタンのデザインをもっと本文になじませたい」という場合は、Wordの装飾と同じ感覚で、テーマ標準の「ボタン」ブロックを使い、そのリンク先にStripeのURLを入れる方法もあります。手っ取り早く確実なのは、上のカスタムHTMLブロックです。

④ QRコードにして対面・チラシで使う

決済リンクの便利なところは、ホームページ以外でも同じURLを使い回せることです。同じURLをQRコードにすれば、チラシ、店頭のPOP、名刺、セミナー会場のスライドに載せて、その場でスマホから決済してもらえます。

Stripeの決済リンクの管理画面には、そのリンクのQRコードを表示・ダウンロードする機能があります。無料のQRコード作成サービスにURLを貼っても作れます。1本のリンクを、Web・メール・SNS・紙、すべての入り口で共有できる。これがネットショップを丸ごと作るのとは違う、身軽さです。

⑤ 決済後の「ありがとう」メッセージを設定する

最後に、体験を仕上げる小さな設定です。Stripeの決済リンクには、支払い完了後にお客様へ表示するメッセージをカスタマイズする機能があります。

僕は完走証明書の決済に、こんな文面を入れました。「ありがとうございます。48時間以内に証明書のPDFをメールでお送りします。まだゴール写真とお名前を送っていない方は、こちらのアドレスへ」。

たった数行ですが、支払った直後の「これで合っていたかな」という不安を、確実に消してくれます。お金を払ってもらう場面だからこそ、この一言が効きます。

「Stripe挫折」の正体は、技術ではなく手続きだった

ここまで「簡単だ」と書いてきましたが、実は僕には過去に一度、Stripeで挫折した経験があります。今回あらためて向き合って、その挫折の正体がはっきりわかりました。そして、それこそが中小企業が決済導入でいちばんつまずくポイントだと確信しています。

数年前、僕はStripeのアカウントを作ったものの、決済を始められないまま放置していました。「きっとAPI連携の設定が難しくて、途中で止まったのだろう」と、ずっと技術的な失敗だと思い込んでいました。

ところが今回、管理画面を開いて原因を突き止めたら、まったく違いました。アカウントの上部に「決済が一時停止中」という表示が出ていて、その理由は——特定商取引法に基づく表記のページ提出が、期限までに間に合っていなかった、ただそれだけだったのです。技術の問題ではなく、書類の問題でした。

日本でネット上で商品を売る事業者には、特定商取引法(特商法)に基づく表記が義務づけられています。具体的には、こうした項目です。

  • 販売事業者名・所在地・連絡先
  • 販売価格と、それ以外にかかる費用
  • 支払方法と支払時期
  • 商品の引渡し時期(デジタル商品なら「決済後すぐ」など)
  • 返品・キャンセルの条件

僕の場合は、自社サイトにこの特商法表記のページをきちんと用意し、そのURLをStripeに提出したら、1〜2営業日の審査を経て、あっさり決済が有効になりました。つまり、僕が数年間「技術で挫折した」と思っていたものの正体は、1枚のページを用意して提出する、という事務作業を後回しにしていただけだったのです。

これは笑い話ではなく、中小企業の決済導入でいちばん多いつまずき方だと思います。技術は思ったより簡単になっているのに、こういう「地味な手続き」で止まり、それを「難しくてできなかった」と記憶してしまう。もしあなたが過去に決済導入を諦めたことがあるなら、一度、止まった本当の理由を確かめてみてください。技術ではないかもしれません。

なお、月額会費のような継続課金を扱う場合は、特商法表記に「自動更新される旨」「解約の方法と、いつまでに申し出れば次回課金が止まるか」を明記する必要があります。一回きりの支払いより一手間増えるので、そこは押さえておいてください。

導入前に知っておく、手数料と入金のこと

技術的なハードルは低いと書きましたが、経営者として現実的な数字も押さえておきましょう。決済を始める前に知っておくべきは、主に2つです。

ひとつは手数料です。Stripeは、初期費用も月額の固定費もかかりません。かかるのは決済が発生したときの手数料だけで、国内のカード決済でおよそ3.6%です(2026年7月時点。カードの種類や決済方法で変わります)。たとえば1万円の商品が売れたら、手取りはおよそ9,640円です。「使った分だけ」の料金体系なので、売れなければ費用はゼロ。まず小さく試すには向いた仕組みです。ただし、数百円のような少額商品を継続課金で売る場合は、手数料率の重みを感じやすいので、価格を決めるときに一度計算しておくとよいでしょう。

もうひとつは入金です。決済されたお金は、Stripeにいったん集まり、設定した周期で自動的にあなたの銀行口座へ振り込まれます。僕のDeep North Japanでは、毎週月曜に自動入金される設定にしています。振込先の口座と入金スケジュールを最初に登録しておけば、あとは手作業なしでお金が回ります。この「集金の手間がゼロになる」ことも、決済リンクの見えにくい価値です。請求書を起こして、振込を確認して、消し込む——その一連の事務が、まるごと不要になります。

PayPalとの違い — 買う側にアカウントを作らせない

「決済ならPayPalもあるのでは」と思う方もいるはずです。僕も両方を検討しました。そのうえでStripeの決済リンクを選んだ、いちばんの理由をお伝えします。

買う側に、アカウント登録を求めないことです。

Stripeの決済リンクは、お客様がURLを開いてカード番号を入れるだけで支払いが完了します。会員登録もログインも不要です。一方PayPalは、支払う側にもPayPalアカウントの文化が根強く、特に一見のお客様や、関係がまだ浅い相手には、「アカウントを作ってください」というひと手間が離脱の原因になります。

僕のように海外の見知らぬ読者に12ドルの商品を売る場合、この差は決定的でした。相手にアカウントを作らせている余裕はありません。カードでその場でサッと払えることが、そのまま売上を左右します。

これは海外向けに限った話ではありません。国内でも、セミナーの参加費、単発のサービス料金、チラシから誘導する商品——相手が一見で、その場で決めてほしい場面ほど、「アカウント不要」の価値は大きくなります。買う側の手間を1秒でも減らすことが、そのまま成約率になるからです。

自分で貼るか、できたものに任せるか

ここまで読んで、「これなら自分でもできそうだ」と思ったなら、ぜひこの記事の手順をそのまま使ってください。Stripeのアカウントを作り、商品を登録し、②のボタンコードを自社サイトに貼る。それだけで、あなたのホームページは今日から「売れる」ようになります。

一方で、「考え方はわかったが、そこまで手を動かす時間はない」「特商法の表記や決済後の導線まで含めて、まとめて整えてほしい」という会社もあるはずです。それも正しい判断だと思います。

僕たちハンズバリューは、こうした自社での実践で培ったノウハウを、ホームページ制作のお客様に還元しています。決済導入だけでなく、問い合わせ対応や集客までを含めて、ホームページを「作って終わり」から「働く仕組み」へ変える。それが、僕たちが接客AIクラウドとして提供しているものです。自分で作る道と、任せる道。どちらを選ぶか迷う場合は、お問い合わせから現状をお聞かせください。御社の商品と客層に合わせて、いちばん摩擦の少ない売り方を一緒に設計します。

まとめ — 「売れるホームページ」の最初の一歩

決済導入は、もう一部の大企業だけのものではありません。この記事の要点を、もう一度整理します。

  • 決済リンク(Stripe Payment Link)は、プログラムを書かずにホームページへ貼れる
  • 貼るのは、②で示したボタン1行のコードだけ。WordPressなら「カスタムHTMLブロック」に貼るだけ
  • 同じリンクは、QRコードにしてチラシや対面でも使い回せる
  • 中小企業が決済でつまずく本当の原因は、技術ではなく特商法表記などの手続きであることが多い
  • 買う側にアカウントを作らせない手軽さが、そのまま成約率につながる

僕は非エンジニアですが、この方法で自社メディアに決済を1日で載せました(2026年7月時点の実録です)。出発点は高度な技術ではなく、「商品1つを、リンク1本で売る」という発想の切り替えでした。あなたのホームページにも、売りたい商品やサービスがあるなら、その一歩は今日から踏み出せます。

「作って終わり」のホームページ、変えませんか?

守る・知る・書く・話す — 4つのAIが、御社のホームページを24時間働く営業担当に変えます。決済導入も、まずは無料のHP診断で現状を把握するところから。


無料でHP診断を受ける →


関連記事

著者: 島田慶資(ハンズバリュー株式会社 代表取締役/ITコーディネータ)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー および 利用規約 に適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

このページでわかること