Creating a seamless sales funnel is crucial for converting visitors into customers. With CodeDesign.ai, you can easily add products, integrate Stripe for payment processing, and build an upsell flow to increase your average order value. In this guide, we’ll walk through how to set up a product and Stripe integration on a funnel page, allowing you to maximize sales efficiency.
In this Guide, we'll use a sales funnel template to demonstrate the process of setting up products and stripe payment. The process is streamlined as follows:
Starting a project from a sales funnel template
Making sure that the call-to-action buttons in the landing page are pointed to the Checkout page
Adding the first product in the Checkout page
Integrating Stripe with the project
Selecting Product and Stripe payment method for the checkout page
Setting up redirection to Thank you page or to the upsell page.
Loading a new Funnel Project from Template
You can setup your funnel page from our funnel template library, or you can build from scratch using forms and other utilities from the builder. We are using this particular funnel template for the demo.
If you go to the pages option, you'll see that this funnel template as usual comes with multiple pages:
404 Page - A 404 Page is shown when the webpage you're trying to visit can't be found, often due to a broken link or a mistyped URL.
Home/Landing page - The visitor from an email or ad campaign will land here. All the product/service information, testimonials and other marketing elements will be present in the landing page. As you see in the image, you'll find one or more 'Shop Now' or
Checkout page - This is where the user will be directed once they click the call-to-action button, or in this case, the 'Shop Now' button.
Upsell Page - This is where the user will be offered a choice to purchase an add-on product or service along with the existing purchase.
Thank You page - The user will be directed to this page once the purchase is completed.
Pointing the Call-to-action button to Checkout page
When setting up a sales funnel, you'll want to ensure that your funnel begins with a strong call-to-action, typically a "Shop Now" or "Buy Now" button on your home/landing page. This button should direct visitors to the first step in your funnel, usually the checkout page. We already have that ready as we created this project from a template.
Now let's make sure we have the call-to-action button pointed/linked to the 'Checkout' page.
Go to the home page and select the call-to-action button,in this case, the 'Shop Now' button. Once the button is selected, you'll see the 'Link' section on the sidebar that you can click to expand.
By default, the pages will be linked as you are using a template, but in case not, you can select 'Page' option for the link. and select the 'Checkout' page as Page URL.
Once that's sorted, you can go to the 'Checkout' page to configure the form. Navigate using the page section on top left of the builder.
On the Checkout page, you'll have the form fields to collect customer information, such as email, first name, and last name, along with a "Buy Now" button.
Now simply select the form on the canvas and then if you look at the sidebar, you'll find the 'Form Elements' panel to edit the field and button properties.
Adding the first product
Once the form is selected in the canvas. Go to the sidebar and click on the 'Buy Now Button' option as seen on the image below and then click on the 'Add Product' button to start adding the product.
Now you'll see a popup where you'll need to enter the product information such as name, description, price, currency and period. Once the product information is entered, click on the 'Add Product' button.
You have successfully added your first product into the sales funnel. Now let's integrate the funnel with Stripe for payments.
Stripe Integration for Your Funnel
Stripe integration is the backbone of payment processing for your funnel. Once your product is set, follow these steps to integrate it to Stripe:
On the 'Form Elements' panel, click on the 'Integrate Stripe' button as seen on the image below.
Now you'll be directed to the 'Integrations' tab in the 'Project Settings' workspace. Simply click on the 'Connect' button on the 'Stripe' section as in the image below. You see a section with a button labelled 'Connect to Stripe'. Click there as well.
Now you'll be redirected to the stripe login page to set things further on Stripe's end.
Log into your Stripe account (or create a new one)
Now select your business and click on the 'Connect' button.
After connecting, you’ll be redirected back to CodeDesign.
Configuring the Funnel’s Checkout Page
With the product created and Stripe integrated, it’s time to ensure your checkout page is ready:
Go to the Checkout Page and then on the form settings select Stripe as the payment method.
You can also set a return page link for after the purchase. Typically, you’ll direct users to the next page in the funnel—often an upsell page—or to a "Thank You" page if no upsell is offered.
Creating an Upsell Page in the Funnel
To increase your revenue per customer, you can add an upsell page after the initial purchase. This step allows customers to buy additional products, enhancing your sales funnel.
The process is same as we did with in the Checkout page.
Go to the pages section and select the upsell page. Add a product just as we did earlier.
Add a second product information to this page. Let’s set the price at $29 and name it 'Upsell'. Now click on the 'Add Product' to create the second product.
Now you'll find two products in the product dropdown. Select the product 'Upsell' and then select 'Stripe' for payment.
After the upsell purchase, redirect users either to a Thank You page or another upsell, depending on your funnel strategy.
Now we have successfully created a sales funnel with a checkout page and an upsell page. Once your funnel, products, and upsells are set up, publish the entire website.
After publishing, all payment buttons will be live, and transactions will be recorded under the Contacts and Orders sections in the Data Hub. If you need to update product details or change pricing, you can always return to the Products section and make adjustments.
Video Guide : Adding Product & Connecting to Stripe
If you prefer a video guide, we've put together a video guide that runs through the exact same demo. By using CodeDesign.ai’s funnel system and Stripe integration, you can guide users through a smooth purchasing experience, maximize revenue through upsells, and manage all transactions effortlessly.
If you have any questions or need further assistance, feel free to reach out through our support channels!