Version 2 of the Stripe widget is here! The updated version allows you to collect customer information such as name, email and phone number upfront before any payment info. This will allow you to collect more data and retarget any potential customers that abandon the checkout process. The new widget is broken up into three steps
- Step 1 – Collect customer information
- Step 2 – Collect and process payment information
- Step 3 – Create username and password
In this article, we’ll go over how to use the Stripe widget to upsell within Clickfunnels. Even though we’ll be using Clickfunnels in this example, the concepts discussed here can be applied to any website building platform or CMS that you wish to use. The first step in this process is to connect your Stripe account to your LightSpeedVT system. If you haven’t done this already, head on over to https://support.lightspeedvt.com/knowledge-base/stripe and check out our Stripe article which goes over how to connect Stripe with LSVT step by step.
Once the connection is made, you’ll need to create your products in Stripe and then configure those products within LSVT. In this example, we’re going to be setting up three products, “Sales Mastery” which is a one-time charge, “Sales Mastery Live” which is a monthly subscription, and “Talk More, Sell More” which is a bonus course that we will setup as a bump product. The idea is to present the customer with the one time charge product first along with the bump product, then upsell them to the monthly subscription. After they’ve made the initial purchase for the one time product, they’ll be redirected to an upsell page which will contain the widget for the monthly subscription.
Creating the Stripe products
Log into Stripe, then navigate to the products section and click “Add product”
You’ll need to give the product a name, a “standard” pricing model and then set it to “One Time”.
Next we’ll create the “Sales Mastery Live” product, which will be a monthly subscription and then the “Talk More, Sell More” product which will also be a one time product.
Now that we have the products set up for the funnel, lets jump over to LightSpeed and configure each product.
Configuring products in LSVT
We’ll need to log into LightSpeedVT and head over to “Integration Management ” from the Super User Dashboard.
Next, we’ll choose the “Account” option in the Stripe section, that will bring us to the product section where we can see a list of all the products we’ve configured in LSVT so far.
Click “Add New Product”
When adding a product, you’ll need to provide several pieces of information. The table below shows the details.
|Active||If checked, the product is active and can be purchased|
|*Name||Name of the product|
|Description||A description of the product|
|Bump Product||An additional offering added to the initial product|
|*Product Type||Subscription or one time payment|
|*Stripe PlanID/SkuID/PriceID||Older products may have a “PlanID” for a subscription product, a “SkuID” for a one products. Moving forward, any new products created will only produce a “PriceID”|
|Restrict Coupon||If checked, you will be able to choose which Stripe coupons can be used with this product|
|*Set User To Access Level||LSVT access level that users will be set to when purchasing this product|
|Assign user to team||If you teams enabled and set up, you can choose the team that users will be assigned to.|
|Add Role(s)||Content roles associated with this product. If you aren’t sure how to get the content role ids, click here to view our article on content containers|
|Remove Role(s)||Any content roles to be removed|
|Send and email notification to||LSVT will send a purchase notification to the email specified|
|Success Message||The message to be displayed after a successful purchase|
|Sign In into LSVT application after successful purchase||If checked, the user will be signed into LSVT and a cookie will be created in the background.|
|After completion redirect URL||If a URL is specified, the user will be redirected to that URL upon successful purchase. If a URL is NOT specified then, the user will automatically be redirected to the LSVT Main menu.|
|Product expiry options||What to do if the subscription expires or is cancelled.|
|Make product available for upgrades / downgrades||Allows users to upgrade and downgrade to and from this product|
After configuring the products in LSVT, we’re going to circle back to the Sales Mastery product and add the book as the bump product. Then we’ll add the redirect url that will take users to the upsell page after a successful purchase.
When all of the fields have been properly filled in, we’ll copy the code snippet and click “Update” to save the changes
The “Allowed url parameters” allow you change some functionality of the Stripe widget. For example, If you’d like to remove the coupon field from the widget, you can pass “&use_cpn=0” as a parameter at the very end of the opening script tag, it will end up looking like this.
<div id="LSVTStripeForm"><script src="https://webservices.lightspeedvt.net/stripe/st_snippet2.aspx?dataid=74&p=27cp1644d5-9676-45a4-a6z9-ff5c3e309263d&use_cpn=0"></script></div>
Adding the widgets to Clickfunnels
Now that we have the code snippet copied, we’ll jump over to the funnel we’ve created within Clickfunnels. In this example, we’ll place the widget for “Sales Mastery” on the first page.
When editing the page, go to the section where you want to place the widget and click “Add New Element”. The element that you’ll want to add is “Custom JS/HTML” .
Click on the new element, then click the “Open Code Editor” button and paste in the code snippet, make sure to click “Save” after you exit the code editor
Next, we’ll do the same thing with the Sales Mastery Live page.
Now we’re all set and ready to drive traffic to our funnel. When users purchase the Sales Mastery product, they’ll enter their name, email and phone number. On the second step they’ll have the option to add the bump product do their order and enter their CC info. When the payment is processed successfully, they can create their username and password.