<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1593488450678541&amp;ev=PageView&amp;noscript=1">

3 Ways to integrate Stripe Checkout with Hubspot

3 Ways to integrate Stripe Checkout with Hubspot

Stripe payment processing is an industry leader in digital and eCommerce payment solutions. Stripe checkout is a payment solution offered by Stripe to include a checkout button on your website pages. Unfortunately, in order to effectively use the Stripe checkout button on HubSpot CMS pages marketers need an understanding of coding languages like Javascript and HUBL (HubSpots unique coding language).

After creating a product in Stripe, Stripe offers users the option to "use this product with checkout", selecting this option Stripe will provide the user with an embeddable code to place on their website page. Embed codes are not the ideal method for placing content into your website, because using an embed code you may be forced to using styling based on the code and not your website.

A closer look at the code

The way Stripe Checkout works is a unique code is created for each product you intend to use with checkout. When the button is clicked the script in the code will generate a unique URL. A unique URL means you can not just copy the URL and paste it to a linked image or text, because once the transaction is completed by one visitor that URL is never used again.

The embed code format is the same for every product you create, within the code are required elements that must happen the same way every time in order for the button to work properly. For example, to successfully generate the unique URL Stripe must identify following details:

  • Publishable key, also known as the PK token. This is going to be the same for all of your products as this is the link to your Stripe account. Learn more about API Keys for Stripe
  • Product SKU, not to be mistaken with the Product ID, your SKU is unique to each individual item within your product category. For single purchase items this code will start with "sku_" subscription products will start with "plan_".
  • Product type, is this a subscription or a single item purchase. As previously mentioned single items are identified with a SKU and subscriptions are referred to as Plan.
  • Quantity, the checkout code by default will be set to a qty of 1, if you need to sell more than 1 item you will have to modify the qty in the code once you have embedded it on the page.
  • Success URL, the success URL is mandatory as it will determine where your customer is redirected after a successful transaction.
  • Cancel URL, the cancel URL is required for all instances where the transaction has failed.

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
id="checkout-button-sku_GnfZUQMJGWR5ba"
role="link"
>
Checkout
</button>

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

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

var checkoutButton = document.getElementById('checkout-button-sku_GnfZUQMJGWR5ba');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: 'sku_GnfZUQMJGWR5ba', quantity: 1}],

// 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/cancelled',
})
.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>

Once you have identified these key elements of your Stripe Checkout code, you can begin using Stripe Checkout with a varying degree of complexity to create any eCommerce shopping experience for your website visitors.

HubSpot Marketplace Solutions

Thankfully, marketplace providers like Larmahil offer modules and templates which are specifically designed to integrate Stripe Checkout with HubSpot pages by using the 6 identifying elements of your checkout code, with no additional coding required. Let's take a look at 3 ways to integrate Stripe Checkout with HubSpot pages using custom modules and templates from Larmahil.

Stripe Checkout Button

 

stripe-button-thumb

If you are looking for flexibility in your design and the ability to put a payment call to action anywhere on the page, using the Stripe Checkout button is your best choice. This stand alone module can be inserted into any section of any HubSpot CMS page using the drag and drop builder. With editable features like size, shape, and colour, not only can you place the button anywhere you need it, but it will match your branding and design perfectly.

Pricing Table with Stripe Checkout

Marketplace_Pricing-Table

Introducing our latest module into the HubSpot Marketplace Pricing Table with Stripe Checkout. Pricing tables are a popular layout choice to highlight the value your product or service offers, the downside to using a pricing table is it usually requires an extra step in the purchasing process. You can highlight your core features, and clearly define your pricing and services, but the call to action is often a link to another landing page with a form submission.

There are 187+ pricing table modules and templates currently listed in the HubSpot Marketplace, but only 1 includes a Stripe payment integration built into the module.

Feature Product Landing Page

 

Marketplace_product-feature-thumbnail

 

We created the feature product landing page as part of a simple eCommerce bundle for HubSpot. What makes this unique from placing a simple button is how the page layout incorporates Stripe Checkout as a seamless component within the page structure. For marketers looking for a ready out of the box solution this landing page design is not only sleek and stylish, but it is also a perfect example of how Stripe Checkout can be incorporated into any landing page design.

Contact us for more information on custom development for HubSpot CMS and other ways you can use custom modules and templates to enhance your website and grow your business.

 

Websites