Create a payment link module
With the payments tool, you can create a checkout experience on your website after setting up payments in your HubSpot settings.
HubSpot provides a default Payments module that can be added to a template or a page directly within the drag and drop editor. This module includes configurable button text and the ability to select which payment link to display. When the visitor clicks the checkout button, they'll be redirected to a HubSpot page where they can then add their payment information and make a purchase. Learn more about using the default payments module.
You can also add the checkout widget directly to your pages. To do so, add the payment field to a custom module and include the field snippet in the module's module.html
file. Or, add the payment link's embed code to a unique custom module or dynamic module in the design manager.
You can add a payment field to a module either through the design manager or locally in a theme module's fields.json
file.
To add a payment field to a module in the design manager:
- In the right sidebar of the module editor, click Add field. Then, in the dropdown menu, select the Payment field.
- Continue configuring the field in the right sidebar. You can then copy the field snippet into the
module.html
file to render the payment field.
To add a payment field to a theme module's fields.json
file, use the code below.
Parameter | Type | Description | Default |
---|---|---|---|
default
| Object | Sets the default selected payment link ID. |
{
"id" :
}
|
After adding the field to the module, add the code below to the module's module.html
file.
You can also copy the snippet in the design manager while in the module editor. In the right sidebar of the module editor, hover over the payment field and click the Actions dropdown menu, then select Copy snippet.

You can copy the payment link embed code from HubSpot and add it to a custom module. You can either create a new module for each payment link that you want to embed, or create a dynamic module. To copy the embed code from HubSpot:
- In your HubSpot account, click the 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 to embed and click the Actions dropdown menu, then Copy embed code.
You can then add the code to an individual custom module, or create a dynamic module.
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- Create a new module.
- Paste the payment link embed code into the module's
module.html
file. - Click Publish changes.
You can now add the custom payment link module to your pages. A checkout page for the payment link that you embedded in the module will appear on the page.
You can create a single payment link module that uses the payment field, which enables you to display a different payment link's checkout widget without creating a unique module for each link.
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- Create a new module.
- Paste the payment link embed code into the module's
module.html
file. - In the module inspector on the right, click the Add field
dropdown menu in the Fields section, then select Payment. - Configure the field in the right sidebar, then click Publish changes.
Add the module to your pages. When you edit the module in the page editor, you can click the dropdown menu and select the link to display.
Thank you for your feedback, it means a lot to us.