Add payment links to your content

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 payment module to a drag-and-drop page or template or add the payment link embed code to your external website pages. You can also add a payment link to your marketing emails. 

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. Hover over a page or post and click Edit.
3. In the upper left, click + Add.
4. Under Modules, click the Commerce section. 
5. Click Payment and drag it into position on the page.
   
   
6. In the sidebar editor:
   • Enter the text to be displayed on the button in the Button text field.
   • 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 behaviour 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. Enter the URL in the URL field. 
       • 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 top 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 link and click Actions, then select Embed.
3. 
4. 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 new module and include a link field to enable content creators 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. Finish setting up and send your email.

When a contact clicks the button, they'll be brought directly to the checkout page. Learn more about what happens in HubSpot after a payment is made.