Add a payment link to your website

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 that customers can click to then enter their payment details. 

• 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. 

• In the sidebar editor, click the Payment dropdown menu and select the payment link to add to the page. 
• To customize the checkout experience, in the Checkout behavior section, select an option:
  • Open in a new tab: another tab will open in the customer's browser where they can enter their payment information. 
  • Sliding overlay: an overlay slides up from the bottom of the customer's screen where they can enter their payment information. 
• 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. 

• 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 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.
• Click the Payment links tab.
• Hover over the link and click the Actions dropdown menu, then select Copy embed code.

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. 

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.