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

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

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

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

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

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

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

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

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

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

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

注意：支払いリンクは、設定された価格ですぐに請求される場合のみ埋め込むことができます。支払いリンクに、購入者が編集可能な商品項目（数量や価格）、オプション、または将来の請求開始日がある場合は、代わりに支払いリンクを使用する必要があります。

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

• HubSpotアカウントにて、［セールス］ > ［支払い］の順に進みます。
• 右上の「支払いリンクの管理」をクリックします。
• リンクの上にカーソルを置き、「アクション」ドロップダウンメニューをクリックし、「埋め込みコードをコピー」を選択します。

外部サイトに直接埋め込みコードを追加します。また、開発者であれば、リンクごとに新しいモジュールを作成するか、HubSpotのデザインマネージャーでダイナミックモジュールを作成することができます。決済リンクモジュールの作成について詳しく説明します。

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

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

マーケティングEメールに決済リンクを追加する

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

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

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

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

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