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. You can also add a payment link to your marketing emails.
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 paymentsmodule 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, navigate to Sales > Payments.
In the top right, click Manage payment links.
Hover over the link and click the Actions dropdown menu, then select Copy embed code.
Please note: when you embed the payment link on a page, the order summary and checkout description will not appear. To display the order summary and checkout description, you can share the link directly with a buyer.
Please note:creating modules requires knowledge of HTML, CSS, HubL, and the HubSpot design manager. HubSpot recommendsworking with a designerto 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.
In your HubSpot account, navigate to Marketing > Email.
Hover over an existing email draft and click Edit, or click Create email to create a new email.
In the email editor, on the Content tab in the left panel, click and drag the Payment module into the email template.
Click the Payments dropdown menu and select a link.
In the button text field, edit the text that appears. To insert emojis into your text field, click the emoji emoji icon.
Use the styling tools to customize the text font, button color, and size.