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

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

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

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

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

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

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

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

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

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

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

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

• HubSpotアカウントにて、［コマース］＞［支払いリンク］の順に進みます。
• リンク先にカーソルを合わせ、Actionsをクリックし、Embedを選択します。

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

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

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

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

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

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

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

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

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