Skip to content
BETA

Add a payment link to your website

Last updated: November 22, 2021

In Beta

Applies to:

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

You can add a payment link to your website so that your customers can complete payments directly on your site. To add a payment link to your website, you can add the default payments module to a drag and drop page or template or add the payment link embed code to your external website pages.

If you're a developer, you have the option to add a payment field to your theme or custom module, or create a custom payment module

Add the default payments module to your page

When you add the default payments module to your page, the payment link will appear as a checkout button, which will redirect your visitors to a HubSpot page where they can complete the checkout process. 

  • Navigate to your content:
    • Website pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
    • Landing pages: In your HubSpot account, navigate to Marketing > Landing Pages.
    • Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
  • Hover over a page or post and click Edit
  • In the content editor, locate the Common modules section on the Add tab in the sidebar editor. 
  • Click the payments module and drag it into position on the page. 

add-payments-module-to-page

  • In the sidebar editor, click the Payment dropdown menu and select the payment link to add to the page. 
  • In the Button text field, edit the text that appears on the payment link button. 
  • To include an icon on the payment link button, select the Add icon checkbox. To select a different icon, click to expand the Icon editing options. 

edit-icon-on-payment-link-button

  • In the top right, click Update or Publish to set your changes live. 

In the design manager, you can also add the default payments module to the page template

add-payments-module

Add the embed code to an external page or custom module

You can add the payment link embed code to your external website, or create a payment module in the design manager and add the embed code to the module. When you embed the payment link, the checkout form will appear directly on your page. 

  • In your HubSpot account, click the settings settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Objects > Products & Quotes.
  • Click the Payment links tab.
  • Hover over the link and click the Actions dropdown menu, then select Copy embed code.

select-copy-embed-for-payment-link
Add the embed code directly to your external site. Or, if you're a developer, you can either create new module for every link or create a dynamic module in the HubSpot design manager. Learn more about creating a payment link module

embedded-checkout-page

Please note: creating modules requires knowledge of HTML, CSS, HubL, and the HubSpot design manager. HubSpot recommends working with a designer to create coded modules.