Marketplace_Stripe-Checkout-form

The Stripe checkout form for HubSpot is a fully functional HubSpot form integrated with Stripe Checkout.  Capture contact details directly in HubSpot, send follow up emails, and trigger workflows, while allowing Stripe to securely process your payments and capture credit card details.  

This module is compatible with all HubSpot landing pages and website pages.  It does not require a subscription or any third-party integrations. You can use this module without server access. 

View Example Forms

SET UP

The Stripe checkout module requires your Stripe account to be set up with Checkout Enabled

Learn more about Stripe Checkout.

Creating products in Stripe:

  1. From dashboard visit the Products Tab
  2. + Add product  or select an existing product
  3. Select One-Time or Recurring 
  4. Name, Description, Price, & Image
  5. Save product (top right corner)
  6. In the Pricing section of your new product there is a hidden menu next to the date created, this is where you will find the Checkout Code Snippet required for teh rest of your module set up.

Screen Shot 2020-08-03 at 8.40.05 AM

The highlighted text will be important when setting up your module.

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button-sku_Hk7pwkuKq6HHCU"
role="link"
type="button"
>
Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
var stripe = Stripe('pk_test_thNlL3OOtA1TDrAVqfS7mKD2');

var checkoutButton = document.getElementById('checkout-button-sku_Hk7pwkuKq6HHCU');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
lineItems: [{price: 'sku_Hk7pwkuKq6HHCU', quantity: 1}],
mode: 'payment',
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: window.location.protocol + '//larmahil.com/success',
cancelUrl: window.location.protocol + '//larmahil.com/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>

Setting up your HubSpot form is no different from any other HubSpot Form module with a couple of small exceptions.

If you're selling multiple quantities or multiple products you will need a HubSpot field property to match. 

Products will be set up as a multiple select list items with each item holding an internal value that matches the ID from Step 1 this will included either sku_ or plan_ as pictured below.

Screen Shot 2020-08-03 at 8.50.51 AM

The quantity property is a simple number field. We recommend setting a default value of 1 or marking this field required in the form. 

The first step in using the module is to place it in either your page template through the design manager or by using the page building tools in HubSpot page editor. 

In the left column you will ADD > Search Stripe Checkout Form > Place module on your page.

Theme Settings - will control the color of your background, form, and button. 

Form - allows you control of the title and paragraph section to display above the form.  This is also where you select the form you created in the HubSpot form builder. ***Do not set a thank you page as the form will automatically redirect to Stripe, your final thank you page destination should be the success URL in the stripe code.***

Form Type - Choose one of the preset form types found on the example page.  If none of the form types match the product you have set up please contact us for assistance.

Stripe Settings - Enter your stripe checkout information that you saved from creating your Stripe checkout products.

 

Service and Support

We offer unconditional support and a 100% moneyback guarantee on all of our modules.  If you have any issues with this module contact our support team and we will be happy to answer your questions. 

Open a Support Ticket

Product type
  • Module
Functions
  • Calculator
  • Conversion
  • Form
Works with
  • Website/Landing Pages

Book time to meet


Provider

We provide custom development for HubSpot marketing and CMS tools. From modules to templates, to full website migration and development, we are willing and able to take on any size task. Want to learn more about our development team?  Contact us today to get your project started.