Add a payment field to a module (BETA)

Last updated:

This functionality is in beta and requires your account to be ungated. By participating in this beta you agree to HubSpot's beta terms.

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 a dropdown menu to select which payment link to use from your account settings. When the visitor clicks the checkout button, they'll be redirected to a HubSpot page where they can then add payment information and checkout. Learn more about using the default payments module.

You can also add a payment link to a custom module by first adding the payment field to the module, then adding the field snippet to the module's module.html file. 

Add 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 module.html to render the payment field.

To add a payment field to a theme module's fields.json file, use the code below.

JSON
// 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" : }

Add the payment field snippet

After adding the field to the module, add the code below to the module's module.html file.

HTML
<!-- 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 Actions.
  • In the dropdown menu, select Copy snippetdesign-manager-payments-module-copy-snippet-dropdown-menu0

 


Was this page helpful? *
This form is for feedback on our developer docs. If you have feedback on the HubSpot product, please share it in our Idea Forum instead.