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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コンタクトがボタンをクリックすると、直接 チェックアウトページに移動します。次より後、HubSpotでどのような決済機能が発生するかについてはこちらをご覧ください。