The standard checkout flow
Using the basic embed codes provided, the checkout experience will be completed in five steps.
Choosing the subscription
The first thing your customer will need to do is choose what product and plan they want to subscribe to and, if you have multiple cycle options (e.g. Monthly and Annual), they'll need to choose how frequently they want to be charged. This is also the step where they'll choose any add-ons or allowances that are available in conjunction with their selected plan. Step 1 can be made up of many screens: product selection, plan and cycle selection and any add-on and allowance selection - depending on your offering.
Entering basic details: Name, email and address
These are our mandatory fields; we need these in order to complete the customer's subscription. The address that we require is the billing address. When creating your product you can choose whether you need to collect an additional shipping address, as this may be different.
If you have opted to use address validation, we'll show an address look-up tool and use this to validate the customers address. If not, your customer will need to enter their address manually.
Completing any custom fields
During your product configuration you'll be able to create custom fields that allow you to collect information from your customers while they're signing up. This information is then stored in their profile in your Billsby account. .
Entering payment details
We need the customer's payment information to be able to complete the initial payment and subsequently continue to bill them for the rest of their subscription. Payment details at this stage are mandatory. Even if you're offering a free period, we'll still need their details, so that we can bill them once this period is over without any work on your end.
Customers will be able to enter any coupon codes in both this screen and in the billing summary, to be able to benefit from your configured discounts.
Summary and confirmation
Before they confirm their payment, your customer will see a summary of their order. This includes any information that you have passed on to us using the embed code. At this point they'll need to agree to the Terms of Use and Privacy Policy before making their payment and finishing their subscription journey.
Once the order is complete, they'll receive confirmation that their subscription has been successfully processed and you'll be able to see the customer on the Customers page in your Billsby account.
Save your customers time and take more control with data passthrough
Customer details can be passed through the Billsby Checkout using a simple JavaScript array, and the product, plan and cycle embedded into the subscribe link, giving you even more control over your checkout experience. The information that you pass across will determine what steps your customer sees in the checkout:
The more information you send across in this section, the more screens you'll skip in Step 1. For instance, if you pass across just the product ID, we'll skip the product selection and direct your customer straight to the plan selection. If you want to skip Step 1 completely, you can pass across all IDs to pre-select the entire subscription. You can find these embed codes by going to Settings > Embed codes > Passing product, plan, cycle, add-on and allowance IDs in the subscribe button and then by choosing the product, plan, and cycle in the box given you'll be presented with the code to use in your checkout.
Overriding redirect settings in the subscribe button
Once your customer has successfully subscribed, they'll be able to use the button on the confirmation screen to redirect to a new URL. To set up the 'Continue' button text as well as the redirect URL, head to Settings > Configuration > Checkout and account management. If you want to send customers to a different URL, you can use the embed code shown below to override the URL you set up in your configuration. We will then append the customer ID and subscription ID to the URL which you can then use to make API calls to look the customer up and take any further actions you wish to take, such as creating a user account.
Passing customer data in an object
Once you've collected information about your customers, you can pass this on to us so that we may pre-fill their basic details in the checkout. This saves your customer time inputting details that they have already provided to you, whilst offering a more tailored and personal purchasing experience. If you pass across all the information that you've configured to collect in the product configuration, we'll skip Step 2 completely. If you also pass across information for custom fields you can also skip Step 3.
You cannot skip step 4 or 5 with embed codes.