How to enable Stripe checkout to work with HubSpot CMS pages.
In order to use Stripe checkout you must first enable it in your Stripe dashboard:
- Checkout Settings
Activate the client-only integration and register your domains
- From the Stripe dashboard select Products for the menu on the left.
- Click +Add product
- Select your Type of product
- One-time products for products with SKU’s that are compatible with Checkout.
- Recurring or one-time product (both options will work with our modules, this option gives you more flexibility for future applications)
- Give your product a Name, Image, & Description
Select a price Model
- Standard – Select standard pricing if you charge the same price for each unit.
- Package Pricing – Select package pricing if you charge by the package or group of units. For example, say you charge $25.00 for every 5 units. Purchases are rounded up by default, so a customer buying 8 units would pay $50.00.
- Graduated pricing – Select graduated pricing if you use pricing tiers that may result in a different price for some units in an order. For example, you might charge $10.00 per unit for the first 100 units and then $5.00 per unit for the next 50.
- Volume pricing – Select volume pricing if you charge the same price for each unit based on the total number of units sold. For example, you might charge $10.00 per unit for 50 units, and $7.00 per unit for 100 units.
***Note all pricing options are compatible with Checkout we recommend Standard pricing whenever possible***
- Enter your price and select One time or Recurring
- For recurring options select the frequency
- Save product
Stripe Checkout Code
Your button requires 7 important pieces of information found within your stripe checkout code so we recommend copying the code and keeping it somewhere you can quickly reference.
To find your checkout code:
- Select your product from your product list in stripe
- In the Pricing Section select the three dots to reveal more options
- Get Checkout code snippet
- Copy code and save it to a note or clipboard (somewhere where you can look at it later)
In the HubSpot Page editor you will see we have 7 fields of information to fill in:
- Stripe PK: This is your Stripe Public Key, this key tells Stripe which accounts to credit the funds to. You can find your Stripe PK in the checkout code on (or near) line 18 of your checkout code, or by revisiting your Stripe Dashboard > Developer > API Keys > Publishable KEY it will look something like this: pk_live_w4iuth3i9w4
- Checkout Button ID: This one is tricky so watch closely. The Button ID is related directly to the item or subscription you are selling. You will find the button ID on or around line 27 of the Stripe checkout code, it appears two other times before line 27 but those instances have additional code we do not need. You are looking for something like ‘price_dfg5ds6tg4dstvsd8vsdvds‘
- If your Stripe product is over a year old, or part of a subset of products your ID my start with something other then price_
- Success and Cancel URL: Do NOT include the “https://” portion of your success and cancel url. Be sure these pages match the domains you set up in Stripe way back in the Stripe Checkout settings step 1. The pages should be live and valid pages and from the same domain as you have previously authorized in Stripe. In other words, you can not redirect to a different domain like google.com
- Type: By default, this should be PRICE. If your product is more than a year old it may be One-time Payment for SKU or Subscription for Plan. It is recommended older products be updated to the new PRICE format.
- Mode: You will find the Mode in the same area as the price and product ID. Usually on line 28. If your product is a recurring payment the mode is subscription, if it is a one-time purchase the mode is payment.