Stripe Payment Links：設定、サイト用ボタン、サンクスページ
Stripe Payment Linkガイド
Stripe Payment Link：設定、ボタンの埋め込み、決済後のリダイレクト | We.Inc
Stripe Payment Linkを作成し、デザインしたボタンやBuy Buttonとしてサイトに設置し、購入者を自分のサンクスページへ誘導して、どのキャンペーンで売れたかを計測します。コピーできるボタンコード付きです。
Stripe Payment Linkは、Stripeダッシュボードでコードを書かずに作成できる、Stripeがホストする決済ページです。価格を設定した商品を作り、リンクを作成して、サイト上のボタンに設定します。決済後に購入者を自分のサンクスページへリダイレクトしたり、リンクにパラメーターを追加してメールアドレスを事前入力したり、売上にタグを付けたりできます。
Payment Link、Buy Button、Checkoutのどれを使うか
- Payment Link
- 不要。URLを共有するかリンクを貼るだけ
- 少数の商品の販売、リンクによる請求、SNSのプロフィール
- Buy Button
- スクリプト1つとタグ1つを貼り付ける
- Stripeデザインのボタンをページに埋め込む
- Checkout（API）
- サーバー側のコードでセッションを毎回作成
- カート、顧客ごとの価格、ログイン型のアプリ
このガイドでは、ダッシュボードでの設定、リンクをサイトに設置する3つの方法、自分の完了ページへのリダイレクト、事前入力と計測のためのリンクパラメーター、そして見落とされがちな設定である税金、数量、プロモーションコードについて解説します。
- Stripeダッシュボードで、名前、画像、単発または定期の価格を設定した商品を追加します。
- その価格の決済リンクを作成し、数量、プロモーションコード、税金の徴収、収集する情報などのオプションを選びます。
- 決済後の設定で、Stripeの確認ページをそのまま使うか、自分のサイトのページにリダイレクトするかを選びます。
- リンクをコピーしてサイトのボタンに設定するか、Buy Buttonを作成して埋め込みコードを貼り付けます。
- テストモードでStripeのテストカードを使って一連の流れを確認し、本番モードに切り替えてから、実際に購入して返金する形でもう一度確認します。
- 商品と価格ごとにリンクを1つ作りましょう。価格が変わったら、過去の投稿やメールがまだ指している古いリンクを使い回すのではなく、新しいリンクを作ってサイト上で差し替えましょう。
- 割引を行う予定があれば、リンクの設定でプロモーションコードを有効にしましょう。後から作ったコードも、サイトに手を加えずに使えます。
- 購入者を自分のサンクスページに誘導すれば、次のステップを案内し、コンバージョンを計測し、関連商品を提案できます。
- ボタンのラベルは、たとえばBuy the template, $29のように価格を含めてわかりやすく書きましょう。決済時の驚きが少ないほど、離脱も減ります。
よくある質問
Payment Linkに追加費用はかかりますか？
Stripeはリンク自体には料金を請求しません。決済が成功するごとにStripeの通常の手数料がかかり、その額は国と決済方法によって異なります。売上ごとの手取り額は、決済手数料計算ツールで確認できます。
Payment Linkでサブスクリプションを販売できますか？
はい。商品に月額や年額などの定期価格を設定すれば、リンクからサブスクリプションが始まります。カスタマーポータルを有効にすれば、顧客はStripeのカスタマーポータルからサブスクリプションを管理できます。
決済後に自分のページへリダイレクトするには？
決済リンクの決済後の設定で、Stripeの確認ページを表示しないを選び、自分のページのURLを入力します。URLに{CHECKOUT_SESSION_ID}を含めると、StripeがそれをセッションIDに置き換えるので、ページやサーバーで注文を照会できます。
リダイレクトだけでデジタル商品を届けられますか？
それだけでは不十分です。URLを知っていれば誰でもサンクスページを開けてしまいます。ダウンロードやアカウントへのアクセスは、サーバー上のwebhook、決済に反応する自動化、Stripeと連携した配信プラットフォームなど、Stripeが確認する仕組みを通じて提供しましょう。
売上がどのキャンペーンから来たかわかりますか？
はい。Stripeはリンクパラメーターとしてutm_source、utm_medium、utm_campaign、utm_term、utm_contentを、また独自の参照用にclient_reference_idをドキュメントに記載しています。広告や投稿ごとに、リンクにこれらを追加しましょう。
リンクを設定する
- 実際に請求が発生しないよう、テストモードから始めましょう。リンクは商品と価格から作られるので、先に商品を作成します。わかりやすい名前と正方形の画像を設定しましょう。どちらも決済ページに表示されます。
- リンクを作成するときは、何を収集するかを決めます。請求先住所、配送先住所、電話番号、あるいは会社名などのカスタムフィールドです。項目が1つ増えるごとに完了する決済は減るので、注文の処理に必要なものだけを求めましょう。
- 売上税やVATがかかる地域に販売する場合は、自動税金徴収を有効にします。これはStripe Taxを使うもので、税務登録の設定が必要です。そうでなければ、税金を価格に含め、その旨をページに記載しましょう。
サイトに設置する
- 最も簡単なのは、ボタン風にデザインした通常のリンクです。すぐに読み込まれ、デザインにもなじみます。下の例では、コピーできる3つのスタイルを紹介しています。2つ目の方法がBuy Buttonで、Stripeがページ内にボタンを描画し、クリック処理も行います。
- リンクは同じタブで開きましょう。決済を新しいタブで開くと、スマートフォンのユーザーが混乱し、サンクスページへの戻りも機能しなくなります。
決済リンク用のボタンコード
hrefを自分のリンクに置き換えてください。各ボタンは通常のリンクなので、HTMLを受け付けるサイトビルダーならどこでも動作します。
価格入りの塗りつぶしボタン
スマートフォンでは全幅の目立つボタンになり、広い画面では内容に合わせて縮みます。
ボタン付きの価格カード
単一商品向けの小さなカードで、含まれる内容と、ボタンの下に安心感を与える一文を表示します。
サブの選択肢向けのアウトラインボタン
月額プランの隣に置く年額プランなど、2つ目の価格には控えめなスタイルを使いましょう。
Stripe Buy Buttonの埋め込み
ダッシュボードの決済リンクのページからBuy Buttonを作成し、表示されたコードを貼り付けます。コードは次のような形です。
Buy Buttonの埋め込みコード
スクリプトはページごとに1回読み込まれ、stripe-buy-buttonタグ1つにつきボタンが1つ描画されます。IDはダッシュボードから取得します。
ReactでのBuy Button
スクリプトを一度読み込んでから、カスタム要素をレンダリングします。TypeScriptでは、.d.tsファイルで要素を宣言する必要がある場合があります。
事前入力と計測のためのリンクパラメーター
これらをクエリ文字列としてリンクの末尾に追加します。値はURLエンコードする必要があります。
Stripeがドキュメントに記載しているPayment LinkのURLパラメーター
- ?prefilled_email=ana%40example.com
- メールアドレス欄を事前入力する
- ?prefilled_promo_code=LAUNCH20
- プロモーションコードを適用する（プロモーションコードの有効化が必要）
- ?client_reference_id=order_1042
- 決済セッションに独自の参照IDを保存する
- ?locale=fr
- 決済ページを指定した言語で表示する
- utm_source, utm_medium, utm_campaign, utm_term, utm_content
- ?utm_source=newsletter&utm_campaign=autumn
- 購入者を送り込んだキャンペーンを記録する
訪問者のキャンペーン情報をリンクに引き継ぐ
ページURLのUTMタグをページ内のすべての決済リンクにコピーし、訪問者を連れてきた広告や投稿に売上が紐づくようにします。
セッションを読み取るサンクスページ
決済後のリダイレクト先を、https://yoursite.com/thanks?session_id={CHECKOUT_SESSION_ID}のようなURLに設定します。ページではすぐにお礼のメッセージを表示でき、サーバーがあれば決済を確認することもできます。
サンクスページの本文
どこでも動くシンプルなHTMLです。実際の提供（ダウンロードリンク、アカウントへのアクセス）は、サーバーでの確認やwebhookの背後に置きましょう。
サーバーでセッションを確認する（Node）
Stripe公式のNodeライブラリを使います。URLだけを信用せず、セッションが支払い済みかどうかをStripeに問い合わせましょう。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る