お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。

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

更新日時 2025年10月23日

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

すべての製品とプラン

HubSpotウェブサイト、マーケティングEメール、または外部サイトに支払いリンクを追加して、お客さまがコンテンツから直接支払いを受けられるようにする方法をご確認ください。

ウェブサイトに支払いリンクを追加するには、ドラッグ&ドロップページ、テンプレート、マーケティングEメールにデフォルトの支払いモジュールを追加するか、外部ウェブサイトに支払いリンクの埋め込みコードを追加します。

開発者は、テーマまたはカスタムモジュールに支払いフィールドを追加することも、カスタム支払いモジュールを作成することもできます。

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

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

アクセス権限が必要支払いモジュールを追加するには、更新するコンテンツタイプの編集権限が必要です。

以下の操作でコンテンツを開きます。
- ウェブサイトページ: HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
- ランディングページ: HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
- ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
ページ の名前 をクリックしてエディターを開きます。
左上の[ add]をクリックします。
[モジュール]の下にある[ コマース ]セクションをクリックして展開します。
[支払い ]をクリックし、ページ上の位置にドラッグします。
サイドバーエディターで、次の操作を行います。
- [ボタン ]フィールドに、ボタンに表示する テキスト を入力します。
- [ボタンターゲット]で、次の操作を行います。
  - [ 支払いリンクを使用 ]を選択して、オーディエンスを支払いリンクのいずれかに誘導します。
    - ［支払いリンク］のドロップダウンメニューをクリックし、支払いリンクを選択します。
    - 支払いリンクをクリックしたときに新しいブラウザータブまたはウィンドウを開くようにするには、[ チェックアウト動作]で[ 新しいタブで開く ]を選択します。また、支払いリンクをページ上でオーバーレイとして表示したい場合は、[ スライドによるオーバーレイ ]をクリックします。
  - [ その他 ]を選択すると、オーディエンスを外部リンク、あるいは自社ウェブサイトやランディングページに誘導できます。
    - [リンク先 ]ドロップダウンメニューをクリックし、[ 外部リンク]を選択して外部リンクを使用します。[URL ]フィールドに URLを入力します。
    - [リンク] ドロップダウンメニューをクリックして[ コンテンツ ]を選択し、既存のウェブサイトまたはランディングページを使用します。[コンテンツ ]ドロップダウンメニューをクリックし、 ページを選択します。
    - リンクをクリックしたときに新しいブラウザータブまたはウィンドウを開くようにするには、[ 新しいウィンドウでリンクを開く ]スイッチをオンに切り替えます。
    - [リンクタイプ]で[ フォローなし ]チェックボックスをオンにすると、検索エンジンに対してリンクが無視されます。
- [ アイコンを追加 ]チェックボックスを選択して、ボタンにアイコンを追加します。
  - [アイコン ]ドロップダウンメニューをクリックします。
  - [置換 ]をクリックして既存のアイコンを置き換えます。
  - 右側のパネルで、アイコン を検索します 。アイコンをクリックして 選択します。
  - [位置 ]ドロップダウンメニューをクリックし、ボタン上のアイコン の位置 を選択します。
右上の[ 更新 ]または [公開 ]をクリックして変更内容を適用します。
デザインマネージャーでは、既定の支払いモジュールをページテンプレートに追加することもできます。

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

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

埋め込みコードをコピーする方法は次のとおりです。

HubSpotアカウントにて、［コマース］＞［支払いリンク］の順に進みます。
支払いリンクの上にマウスポインターを置き、[ アクション]をクリックし、[ 埋め込み]を選択します。
ダイアログボックスで、[ 埋め込みコードをコピー]をクリックします。

埋め込みコードをコピーして、あなたのサイトに直接追加することができます。また、開発者は新しいモジュールを作成し、使用可能な支払いリンクの中からユーザーが選択できるリンクフィールドを含めることもできます。

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

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

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

HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
既存のEメールの下書きの上にマウスポインターを置き、[ 編集]をクリックするか、[ Eメールを作成 ]をクリックして新しいEメールを作成します。
左上の[ add]をクリックします。
[コンテンツ ]タブの [eコマース]で[ 支払い ]をクリックし、ページ上の位置にドラッグします。
[支払い ]ドロップダウンメニューをクリックし、 支払いリンクを選択します。
[ボタンテキスト ]フィールドで、表示される テキスト を編集します。テキストフィールドに絵文字を挿入するには、絵文字のアイコンをクリックします。
[スタイル ]タブをクリックし、フォントの種類、サイズ、色、背景色、位置合わせ、パディングなど、ボタンのスタイルを調整します。
Eメールを完成させて送信します。