How to Create a Working Checkout Page

Video:

Article:

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.

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.

  1. In the Dashboard, click on Account in the top right corner, then select Integrations from the menu on the left hand side.
  2. Scroll down to Payment Processors, and click on Stripe.
  3. 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.
  4. Click View Test Data in the left-hand menu. (This puts Stripe in Sandbox mode, so we won’t make actual transactions.)
  5. 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!)
  6. 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.

  1. In the Convertri Dashboard, click on Campaigns on the top menu.
  2. Select the Funnel campaign and click the blue Edit.
  3. 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.
  4. Make sure you have at least a Credit Card Input element and a Submit Button element on your page, plus any other details you need to collect.
  5. Click Save and Publish on the top right corner.

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!

Go to  https://stripe.com/docs/testing. Here you’ll find a list of dummy credit card numbers for making test purchases.

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 replace your Stripe test integration with your actual account keys:

  1. In the Convertri Dashboard, click on Integrations, then Payment Processors and scroll down to Stripe Config.
  2. Open a new tab. Log into Stripe.com, and toggle View Test Data to OFF in the left-hand menu.
  3. Click on API in the left-hand menu. Copy the Publishable Key and Secret Key and paste them in their respective boxes in the Convertri Payment Processors tab. (Make sure Test Mode is OFF and only copy and paste these actual account keys!)
  4. Click Save.
  5. Republish your checkout page.

That’s it, you have a fully working sales machine, woo hoo!