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

お客様のウェブサイトに決済用のリンクを追加

更新日時 2021年 11月 22日

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アカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログで紹介しています。HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • ページや投稿にカーソルを置き、「編集」をクリックします。
  • コンテンツエディターで、サイドバーエディターの「Add」タブにある「Common modules 」セクションを探します。
  • ペイメントモジュールをクリックして、ページの所定の位置にドラッグします。

add-payments-module-to-page

  • サイドバーエディターで「Payment」ドロップダウンメニューをクリックし、ページに追加する支払いリンクを選択します。 
  • ボタンテキストフィールドで、ペイメントリンクボタンに表示されるテキストを編集します。 
  • 支払いリンクボタンにアイコンを付けるには、アイコンを付ける」チェックボックスを選択します。別のアイコンを選択するには、クリックしてアイコン編集オプションを展開します。 

エディットアイコンオンペイメントリンクボタン

  • 右上の「更新」または「公開」をクリックすると、変更内容が反映されます。

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

add-payments-module

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

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

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左サイドバーのメニューで、「Objects > Products& Quotes」に移動します。
  • Payment links タブをクリックします。
  • リンクの上にカーソルを置き、「Actions」ドロップダウンメニューをクリックし、「Copy embed code」を選択します。

select-copy-embed-for-payment-link
埋め込みコードを外部サイトに直接追加します。また、開発者であれば、リンクごとに新しいモジュールを作成するか、HubSpotのデザインマネージャーでダイナミックモジュールを作成することもできます。 決済リンクモジュールの作成についてはこちらをご覧ください。

埋め込み型チェックアウトページ

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