This article assumes that you have already completed all the steps to creating the product's profile from the Cart menu located at the top menu bar when accessing your bucket.io account. 

If these steps had not been completed please refer to the article named “Quiz Cart Overview”.

​

IMPORTANT:

• Unlike a classic Quiz Funnel, you won’t need a Lead Capture page for a quiz with the cart functionality since the Payment Form would replace it

• You need a minimum of two pages to put together a payment form, there are: Sales Page and a Payment form

• The One Click is optional and you can use it to sell

Step #1: Active Stripe Integration within the Funnel

• Access the funnel and Click Settings 

• From the left-hand menu, click Integrations, located at the bottom of the menu

• Click the Stripe icon, and click on the Integrate to Funnel button.

• This action automatically opens the Integration page and a confirmation message is displayed. Make sure that the Toggle is on (green) 

• Lastly, click the Save Changes button.

Step #2: Add products to your pages

After activating the Payment integration Click Canvas to go back and add your sales page.

• From the left-hand menu locate the Commerce section, then drag the Sales Page and drop it in the Canvas, make sure is positioned after the Quiz Results Component

• If you started from a template there is probably a Lead Capture page, simply delete it and replace it with the Sales page just added

• Click the green Edit button on the Sales page and select one Layout to get started.

• From the left-hand menu, scroll down to the Basic Components, choose Single Product, and drag & drop it anywhere you wish to exhibit your product(s) 

• After adding the Single Product, a pop-up window should display asking to select one of the available products. Choose one and click the Apply button.

• Repeat this process for every product you wish to add

• Style your sales page as you consider best

Step #3: Add Payment Form

After adding the products to a Sales Page, click Canvas from the left-hand menu. 

• From the left-hand menu locate the Commerce section, then drag the Payment Form and drop it in the Canvas, make sure it is positioned after the Sales page

• Click the green Edit button on the Payment Form and select a Layout to get started

• The selected layout should contain all the Contact Information (Billing Address, Payment Method, and Order Summary), so no need for edits unless you need to add more fields 

Note: If you need to add additional fields follow these steps:

• From the left-hand menu, scroll down to the Form Inputs, and drag a Short Input component or any other component needed. 

If the chosen layout does not fit your design, you’ll need to delete and add a new Payment Form from the Canvas as we don’t have an option to instantly change layouts.

Once completed, click Canvas from the left-hand menu to go back. 

Step #4: One Click (Optional)

If you plan to add an “upsell” option then you’ll need to add one more page; a One-Click. Nevertheless, if your flow won’t contain upgrades or upsells simply skip to Step #5.

• From the left-hand menu locate the Commerce section, then drag the One Click and drop it in the Canvas, make sure is positioned after the Payment Form

• Click the green Edit button on the One Click and select one of the Layout to get started

• From Basic components on the left-hand side, choose One Click Product, drag it and drop it anywhere you wish to exhibit your product(s) 

• After adding the One Click, a pop-up window should display asking you to choose one of the available products. Choose one and click the Apply button.

• Repeat this process for every product you wish to add

Once completed, click Canvas from the left-hand menu to go back. 

Step #5: Order Confirmation page

Whether you’re using an upsell or not, you definitely need a confirmation page to come after the purchase has been processed. This step will cover both scenarios; having a One Click, or not having one at all.

5.2 If you’re using Using One Click follow these steps:

Using a One Click, will result in two different confirmation page, one for people that takes immediate action on the offer and one for people that don’t.

Let’s add the confirmation page for upsell buyers:

If you already have a thank you page in place and wish to edit it, this is what you need to do:

• From the left-hand menu, scroll down to the Basic components, choose Product List, and drag and drop it anywhere you wish to display the Summary of the purchase.

If you want to use a brand new thank you page with a new layout, this is what you need to do:

• From the left-hand menu locate the Post-quiz section, then drag a Thank you Page and drop it in the Canvas, make sure is positioned after the One Click

• Click the green Edit button on the Thank you page and select a Layout called Order Confirmation to get started.

Once completed, click Canvas from the left-hand menu to go back. 

Let’s add the confirmation page for non-upsell buyers:

• Repeat the above process to create the second Thank you page.

• Once completed click Canvas to go back

• In the Canvas, section connect the first Thank You Page to the upper red dot on the One Click 

• Lastly, connect the second Thank you page to the bottom red dot on the One Click 

5.3 If you’re not using One Click :

Chances are that you already have a Thank You Page in place and just need to add the order confirmation piece, if that’s your case, here is what you need to do:

Note: If you don’t have a Thank You Page in place please skip this step and move to the next one

• Access to edit your Thank you page, from the left-hand menu, scroll down to the Basic components, choose Product List, and drag and drop it anywhere you wish to display the Summary of the purchase.

If you are adding brand new a Thank You Page here is what you need to do:

• From the left-hand menu locate the Post-quiz section, then drag a Thank you Page and drop it in the Canvas, make sure is positioned after the Payment Form

• Click the green Edit button on the Thank you page and select the Layout called Order Confirmation to get started.

Step #6: are you ready to go live? 

If you have already finished your quiz and need to test the sales pages, please refer to the article “Publish using Test mode VS Live Mode”

If not, this is all you needed to do to get your sales paged up and you can continue working on your quiz funnel.

Still, have questions? Feel free to reach out via support@bucket.io

Mon thru Fri, from 8:00 to 17:00