Create Your First Billing Page

Create your first Billing Page in Billflow

Now we're ready to create our first billing page. Which billing page you use is determined by your usecases and where you'd like to have the billing page reside. Below is a short description of each:

Step 1: Select your page type

From the Billflow dashboard, select the billing page type for your needs and Create Now.

For this example we will continue building a Customer Portal for SimpleSaaS.

Step 2: Configure your Page

Start by giving your billing page a descriptive name about the product its used for, when it was created, or a version number.

Billing Page Named & In Test Mode

You will notice our billing page is starting out in 'Test Mode' which maps directly to Stripe's Test Mode. It is best practice to create your first pages in Test mode and they can easily be promoted to Live Mode for real payments.

The sections that appear will vary based on billing page selected and features being used. In the example of the customer portal we are creating, we will next see options for how the billing page should look and behave. Now is when we can decide things like whether we want to offer coupons and the cancellation behavior. On the right there is a live preview of an example of what the customer would see.

For a detailed breakdown of the usecases, features, and options of each billing page, read along here:

Plan PickerCustomer PortalCheckout FormPricing PageInvoice Portal

Next section is the Stripe Services & Product Setup. We already setup our Products and Service in an earlier step so we should see the option to SimpleSaaS. Make sure you are creating your billing page in the same mode, Test/Live, that you created your Service in Stripe. For detailed instructions on configuring your Services & Product you can read more here.

The next section is Language. The default behavior is to detect your user's browser setting and display their preferred language. We can override with a default language, and we can also provide custom translations.

Next we have Advanced settings for developers. This provides useful settings to run custom code on events that happen from the billing pages and do more in-depth debugging

Lastly, we can embed our billing page. Click 'Save Now' and continue to the next Guide.