Create a payment link module

Last updated:

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. 

Create a payment module using the payment field

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. design-manager-payments-module-add-field0
  • 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.

// Payment field { "name" : "payment_field", "label" : "Payment", "required" : false, "locked" : false, "type" : "payment", "default" : { "id" : } }
ParameterTypeDescription 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.

<!-- Start of Payments embed Script --> <div class="payments-iframe-container" data-src="{{ module.payment_field.properties.checkoutUrl }}?embed=true&hideOrderSummary=true"></div> <script type="text/javascript" src="https://static.hsappstatic.net/payments-embed/ex/PaymentsEmbedCode.js"></script> <!-- End of Payments embed Script -->

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. 

design-manager-payments-module-copy-snippet-dropdown-menu0

 

Create a payment module in the design manager

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. 

select-copy-embed-for-payment-link

You can then add the code to an individual custom module, or create a dynamic module. 

Create a module for an individual payment link

Create an individual 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. embed-payment-link
  • 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. 

Create a dynamic module

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. 

Find a payment link's ID

To find the ID of a specific payment link:

  • In your HubSpot account, navigate to Settings.
  • In the left sidebar menu, navigate to Objects > Products.
  • Click the Payment links tab.
payments-links-settings0
  • Click the name of a payment link.
  • View the payment link's ID at the end of the URL 

payment-link-URL-id0

 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.