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

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

更新日時 2022年 8月 12日

In Beta

対象製品

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

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

デベロッパーの場合は、テーマやカスタムモジュールにお支払いフィールドを追加したり、カスタムお支払いモジュールを作成したりすることができます。 

デフォルトの支払いモジュールをページに追加する

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

  • コンテンツに移動します。
    • ウェブサイトのページ: HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ: HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログ: HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • ページまたは投稿の上にカーソルを置き、[編集]をクリックします。 
  • コンテンツエディタで、サイドバーエディタの[追加]タブの[共通モジュール]セクションを見つけます。 
  • 支払い モジュールをクリックし、ページ上の位置にドラッグします。 

add - payments - module - to - page

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

チェックアウト-ボタン-カスタマイズ-支払い-モジュール

  • 右上にある[更新]または[公開]をクリックして、変更を有効に設定します。 

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

add - payments - module

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

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

  • HubSpotアカウントにて、[セールス] > [支払い]の順に進みます。
  • 右上にある[お支払いリンクの管理]をクリックします。 
  • リンクにカーソルを合わせ、[操作]ドロップダウンメニューをクリックして、[埋め込みコードをコピー]を選択します。

埋め込みコードを外部サイトに直接select - copy - embed - for - payment - link
追加します。または、開発者の場合は、すべてのリンクに新しいモジュールを作成するか、HubSpotデザインマネージャーで動的なモジュールを作成できます。支払いリンクモジュールの作成について詳しくは、こちらをご覧ください。 

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

embedded - checkout - page

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

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

マーケティングメールに支払いモジュールを追加できます。たとえば、イベントを計画するときに、購入者が電子メールからチケットを直接購入できるようにする支払いリンクを含めることができます。 

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

share - payment - link - in - market - e - mail

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

add - emoji - to - button - module

連絡先がボタンをクリックすると、直接お支払いページに移動します。お支払い後にHubSpotで何が起こるかについて詳しくは、こちらをご覧ください。

click - buy - now - link - in - mail

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.