It's important that you understand the customer experience while you're going through your configuration, so you'll want to take a look at what your checkout looks like while you're setting up your Billsby account. To do this, you can use the embed codes.

If you already have your website set up and ready for the checkout to be added, you can just follow the steps to add the checkout using the embed codes. Then, whenever you make any changes to your product, plan and cycle configuration, you can simply click on the subscribe button to view how this will display to your customer, as any changes will be reflected immediately.

Important: Make sure that you refresh the page after making changes in Billsby, otherwise the checkout will not have automatically updated.

If you don't yet have your website set up to test your checkout, you can use a website called CodePen to test your checkout with the embed codes. To get started, navigate to the website and click on Start Coding on the top left hand side of the page.

This will open up the screen where you'll add the embed codes. The area we're interested in using is the HTML box on the left. It's here that you'll paste your code snippets that you've copied from your Billsby account.

In the Billsby app head to Settings > Embed codes - here, you’ll see the two code snippets that you'll need. First, copy the header code using the button provided.

Then go ahead and paste this into the HTML box in CodePen.

Next, you'll need to copy the second code snippet in Billsby.

You'll then need to go back to CodePen and paste this code snippet on the line below the first snippet. When this is done, a subscribe link will appear below the HTML box.

Clicking on the subscribe link will open your checkout modal and here you can see exactly what your customers will see when they're subscribing to your product.