Add payment links to your content

Learn how to add a payment link to your HubSpot website, marketing email, or external site so your customers can pay you directly from your content.

To add a payment link to your website, you can add the default payment module to a drag-and-drop page or template, or a marketing email, or add the payment link embed code to your external website.

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.

1. Navigate to your content:
   
   • Website pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of the page to open the editor.
3. In the upper left, click add.
4. Under Modules, click to expand the Commerce section.
5. Click Payment and drag it into position on the page.
6. In the sidebar editor:
   • In the Button field, enter the text to be displayed on the button.
   • Under Button target:
     • Select Use a payment link to direct your audience to one of your payment links.
       • Click the Payment link dropdown menu and select a payment link.
       • Under Checkout behavior, select Open in a new tab if you'd like the payment link to open a new browser tab or window when clicked. Or, click Sliding overlay if you'd like the payment link to appear as an overlay on the page.
     • Select Other to direct your audience to an external link, or one of your website or landing pages:
       • Click the Link to dropdown menu and select External to use an external link. In the URL field, enter the URL.
       • Click the Link to dropdown menu and select Content to use an existing website or landing page. Click the Content dropdown menu and select a page.
       • Toggle the Open link in new window switch on if you'd like the link to open a new browser tab or window when clicked.
       • Under Link type, select the No follow checkbox to tell search engines to ignore the link.
   • Select the Add icon checkbox to add an icon to the button.
     
     • Click the Icon dropdown menu.
     • Click Replace to replace the existing icon.
     • In the right panel, search for an icon. Click the icon to select it.
     • Click the Position dropdown menu and select the position of the icon on the button.
       
       
7. In the upper right, click Update or Publish to set your changes live.
8. In the Design Manager, you can also add the default payment 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.

To copy the embed code:

1. In your HubSpot account, navigate to Commerce > Payment Links.
2. Hover over the payment link and click Actions, then select Embed.
   
   
3. In the dialog box, click Copy embed code.

With the embed code copied, you can add it directly to your site. Or, if you're a developer, you can create a new module and include a link field for users to select from the available payment links.

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.

Add a payment link to marketing emails

You can add a payment module to your marketing emails. For example, when planning an event, you can include a payment link that allows a buyer to purchase a ticket directly from the email.

1. In your HubSpot account, navigate to Marketing > Email.
2. Hover over an existing email draft and click Edit, or click Create email to create a new email.
3. In the upper left, click add.
4. On the Content tab, under Ecommerce, click Payments and drag it into position on the page.
   
   
5. Click the Payments dropdown menu and select a payment link.
6. In the Button text field, edit the text that appears. To insert emojis into your text field, click the emoji icon.
7. Click the Styles tab to adjust the style of the button, including the font type, size, and color, the background color, alignment, and padding.
8. Finalize and send your email.

When a contact clicks the button of the payment link, they'll be taken to the checkout page.

Next steps

• Learn more about what happens in HubSpot after a payment is made.
• Learn more about managing payments.
• Learn more about creating reports in the commerce analytics suite.