How to Create a Working Checkout Page
You’ve created a site, created your first product - now it’s time to put it all together and create a sales machine. There are three basic steps: connecting a payment processor, choosing a product, and using a site to bring it all together.
NOTE: This tutorial will show you how to make a fully functional, customised checkout from scratch. If you want a quicker and easier option, you can set up our modal checkout. Find out how to do that here.
Tip: Before you start, you will need a Stripe account.
First, we’ll connect Stripe’s test feature in order to make a dummy sale.
- In the Dashboard, click on Account in the top right corner, then select Integrations from the menu on the left hand side.
- Scroll down to Payment Processors, and click on Stripe.
- A blue box will appear, select the Overview tab, and click on Go to Website. A new tab will open. Enter your Stripe login credentials, or create an account if you don’t have one, and navigate to your Stripe Dashboard.
- Click View Test Data in the left-hand menu. (This puts Stripe in Sandbox mode, so we won’t make actual transactions.)
- Click on Developers, then API in the left-hand menu. Copy the test Publishable Key and test Secret Key and paste them in their respective boxes back in the Convertri Payment Processors tab. (Make sure Test Mode is ON in Stripe: toggle it on and off in the left-hand menu and your API keys should change. Only copy and paste the Test Mode keys just now!)
- Click Save. You’ll then be prompted to choose your currency. Click Continue to Settings, and choose your preferred currency. Click Save.
Tip: If you've already got products live, changing your keys to test keys here WILL stop sales, so make sure you perform your test purchase as quickly as possible and then change back to your main keys right away to minimise disruption.
Secondly, we need to create a product. If you already set up a product, great! If not, click here to find out how to create your first product and come back here when you’re done.
Thirdly, we need to use our product’s site to link everything together. You will need to create a site with at least a checkout page with a checkout form plus a download/thank you page to proceed.
- In the Convertri Dashboard, click on Campaigns on the top menu.
- Select the Funnel campaign and click the blue Edit.
- Click on Edit Page on your checkout page card. Click on Products in the top toolbar, and then select the product you want the page to sell from the dropdown list. Enter a message in the credit card statement box (this is what your customer will see on their bank statement). Then put the URL of your thankyou/download page in the Redirect URL box.
- Make sure you have at least a Credit Card Input element and a Submit button element on your page, with its mode set to Purchase in the Properties panel.
- Click Save and Publish on the top right corner.
If you have PayPal integrated and need to collect additional information, you need to add more form inputs here on the page.Convertri will record any additional fields (such as billing/shipping addresses etc) and actions (redirects, etc) from what they enter into your form, not what’s contained in the customer’s PayPal account. You can integrate both Stripe and PayPal to show both options at checkout.
If your product is a digital download, you need to include a download link on your thankyou/download page, or let your customers know where they can access their purchase (if they will soon receive an email, for example).
Tip: It’s a good idea to head to the Properties panel in your thankyou/download page and toggle both No-Index and No-Follow to ON: this prevents search engines from indexing the page. (You do this by heading to your page, clicking on Page button, then Meta Info)
Time to test it out!
- Open your checkout page in the Page Builder, then click Products in the top toolbar.
- The Checkout dialog will appear. You should have your product, payment details and redirect URL all set up before you proceed. In the Product tab, toggle Stripe to Test Mode.
- Go to https://stripe.com/docs/testing. Here you’ll find a list of dummy credit card numbers for making test purchases.
Next, head to your published checkout page, and enter any of these dummy credit card numbers, then any date in the future as the expiry date and any random three-digit number as the CVC. Click the Buy button, and you should be taken to your thankyou/download page and the order should show up in the Orders screen in your dashboard.
Once you’ve made a successful test purchase, you need to head back to the Checkout dialog and toggle the product to Live Mode. This will ensure all purchases go through successfully.
That’s it, you have a fully working sales machine, woo hoo!