メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

コンテンツに支払いリンクを追加

更新日時 2023年 5月 30日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

Marketing Hub Starter, Professional, Enterprise
Sales Hub Starter, Professional, Enterprise
Service Hub Starter, Professional, Enterprise
Operations Hub Starter, Professional, Enterprise
CMS Hub Starter, Professional, Enterprise

お客様のサイトに決済リンクを追加することで、お客様がサイト上で直接決済を完了させることができます。ウェブサイトに支払いリンクを追加するには、デフォルトの支払いモジュールをドラッグ&ドロップでページやテンプレートに追加するか、支払いリンクの埋め込みコードを外部のウェブサイトページに追加します。また、マーケティングEメールに決済リンクを追加することができます。 

開発者であれば、テーマやカスタムモジュールに支払いフィールドを追加したり、カスタム支払いモジュールを作成したりするオプションがあります。

デフォルトのペイメントモジュールをページに追加する

デフォルトの支払いモジュールをページに追加すると、支払いリンクがチェックアウトボタンとして表示され、顧客がクリックして支払い情報を入力することができます。 

  • コンテンツに移動します。
    • ウェブサイトのページです。HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページです。HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログで紹介しています。HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • ページまたは投稿にカーソルを合わせ、[ 編集 ]をクリックします。
  • コンテンツエディターで、サイドバーエディターの「追加」タブにある「共通モジュール」セクションを探します。
  • ペイメントモジュールをクリックし、ページ上の所定の位置にドラッグします。

アドペイメントモジュールトゥページ

  • サイドバーエディターで、「支払い」ドロップダウンメニューをクリックし、ページに追加する支払いリンクを選択します。
  • チェックアウト体験をカスタマイズするには、「チェックアウト動作」セクションで、オプションを選択します。
    • 新しいタブで開く:お客様のブラウザーに別のタブが開き、支払い情報を入力することができます。
    • スライド式オーバーレイ:お客様の画面下部からオーバーレイがスライドアップし、決済情報を入力することができます。
  • ボタン」テキストフィールドで、支払いリンクボタンに表示されるテキストを編集します。
  • 支払いリンクボタンにアイコンを含めるには、「アイコンを追加する」チェックボックスを選択します。別のアイコンを選択する場合は、クリックしてアイコンのディッティングオプションを拡張してください。

checkout-button-customization-payments-module(チェックアウトボタンカスタマイズペイメントモジュール

  • 右上の「更新」または「公開」をクリックし、変更内容を本番に反映させます。

デザインマネージャーでは、デフォルトの支払いモジュールをページテンプレートに追加することも可能です。

アドペイメントモジュール

外部ページやカスタムモジュールに埋め込みコードを追加する

決済リンクの埋め込みコードを外部サイトに追加するか、デザインマネージャーで決済モジュールを作成し、そのモジュールに埋め込みコードを追加してください。支払いリンクを埋め込むと、チェックアウトフォームが直接ページに表示されます。

注意:支払いリンクは、設定された価格ですぐに請求される場合のみ埋め込むことができます。支払いリンクに、購入者が編集可能な商品項目(数量や価格)、オプション、または将来の請求開始日がある場合は、代わりに支払いリンクを使用する必要があります。

埋め込みコードをコピーする場合。

  • HubSpotアカウントにて、[セールス] > [支払い]の順に進みます。
  • 右上の「支払いリンクの管理」をクリックします。
  • リンクの上にカーソルを置き、「アクション」ドロップダウンメニューをクリックし、「埋め込みコードをコピー」を選択します。

コピーペイメントリンクエンベッド
外部サイトに直接埋め込みコードを追加します。また、開発者であれば、リンクごとに新しいモジュールを作成するか、HubSpotのデザインマネージャーでダイナミックモジュールを作成することができます。決済リンクモジュールの作成について詳しく説明します。

ご注意:ページ上に支払いリンクを埋め込むと、注文概要とチェックアウトの説明は表示されません。注文の概要とチェックアウトの説明を表示するには、購入者と直接リンクを共有することができます。

エンベデッドチェックアウトページ

注意:モジュールの作成には、HTML、CSS、HubL、HubSpotデザインマネージャーに関する知識が必要です。HubSpotでは、デザイナーと協力してコード化されたモジュールを作成することを推奨しています。

マーケティングEメールに決済リンクを追加する

マーケティングEメールに決済モジュールを追加することができます。例えば、イベントを企画する際に、購入者がEメールから直接チケットを購入できるような決済リンクを入れておくことができます。

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • 既存のEメール原稿にカーソルを合わせ、[編集]をクリックするかEメールを作成するをクリックすると、新しいEメールを作成することができます。
  • Eメールエディターで、左パネルの「コンテンツ」タブで、「支払い」モジュールをクリックし、Eメールテンプレートにドラッグします。

株価連動型Eメール

  • Paymentsのドロップダウンメニューをクリックし、リンクを選択します。
  • ボタンのテキストフィールドに、表示されるテキストを編集します。テキストフィールドに絵文字を挿入するには、絵文字のアイコンをクリックします。

ボタンモジュールに絵文字を追加する

  • スタイリングツールを使って、テキストのフォントやボタンの色、サイズなどをカスタマイズします。
  • Eメールの設定と送信を終了する。

コンタクトがボタンをクリックすると、チェックアウトページに直接移動します。支払いが完了した後、HubSpotで何が起こるかについて詳しく説明します。

クリックバイナウリンクインEメール

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。