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

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

更新日時 2023年 11月 15日

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

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アカウントにて、[セールス]>[支払い]>[支払いリンク]の順に進みます。
  • リンク先にカーソルを合わせ、Actionsをクリックし、Embedを選択します。

ペイメントリンク-アクション-エンベッド

  • ダイアログボックスで、Copy codeをクリックする。

埋め込みコードをコピーして、あなたのサイトに直接追加することができます。また、開発者であれば、リンクごとに新しいモジュールを作成するか、HubSpotのデザインマネージャーで動的モジュールを作成することができます。詳細はこちらペイメントリンクモジュールの作成

埋め込み型支払いリンク例

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

マーケティングEメールに支払いリンクを追加する

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

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

株価連動型Eメール

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

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

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

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

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

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