This guide is intended to assist merchants in migrating from the legacy JPost form system to our FlexForms. The document covers the steps necessary to create your first FlexForm and Payment Flow, and it will outline the numerous benefits of the new system.
The Resources section at the bottom and the links throughout the guide will direct you to the pages with in-depth instructions for advanced features.
CCBill FlexForms system is an improved successor to the old legacy (JPost) forms. The new easy-to-use forms are a dynamic and user-friendly environment for modern payment platforms. FlexForms come with CCBill Pay, a free tool that allows consumers to store payment information and check out faster.
Intuitive FlexForms payment flows allow you to add multiple payment methods on a single form. The flows define a user’s experience by creating a path depending on the transaction status.
Instead of losing potential sales, you can cascade consumers from one form to another, or even redirect buyers to a 3rd party payment processor. This way, you maximize the chances to complete a sale. Creating and using FlexForms is practical and makes online payment processing effortless for both merchants and consumers.
Our new responsive payment processing system brings many advantages to the table in comparison to JPost legacy forms.
Some of the benefits are:
There are a few critical notices to have in mind before you start working with FlexForms. When you log in to the CCBill Admin Portal to work with FlexForms:
Switching to FlexForms from legacy forms is quick and seamless. The new flexible payment form system enables you to offer the complete portfolio of your products and services on one form.
Instead of having individual forms for the same price for every single subaccount and payment method, you now create one form for all subaccounts.
A Payment flow is a path your consumers take depending on whether their payment is accepted or declined. Payment flows can contain multiple different forms from the library. You can cascade consumers in the flows from one payment form to another.
FlexForms are advanced payment forms your consumers see on your site as they normally do when purchasing subscriptions or goods. One form can be a part of multiple payment flows.
Below is an example comparison between the JPost form setup and the new streamlined FlexForm setup:
|Example Account Setup|
|-> You have five subaccounts.|
-> You offer online checks and payment cards for every subaccount.
|To cover all subaccounts for every payment method you need to:|
|JPost Forms||FlexForms System|
|- Create five individual forms for online checks for every subaccount.||- Create one form for a payment flow.|
|- Create five individual forms for payment cards.||- Assign desired prices for individual subaccounts.|
|Total forms: 10||Total forms: 1|
In contrast to JPost, where you start with creating individual forms, in the FlexForm system, we begin with adding a new payment flow:
To add a flow:
1. Log in to the CCBill Admin Portal.
2. Navigate to the FlexForms Systems mega menu.
3. Select FlexForms Payment Links.
The landing page loads. This is where you create and modify all forms and flows. Make sure the switch is showing you are in the Sandbox mode.
4. Click Add New. A window pops up where you create the primary (first) tile in the payment flow. Note that when you are in the live mode, the system asks you to switch over to Sandbox first. Click "OK. (Continue to SANDBOX)" to confirm.
5. Enter a Name for the payment flow at the top of the screen. This field is required and appears only when you start creating a flow. The name is visible only to you in the Admin Portal. Do not confuse this field with the Form Name field.
6. Select a Redirect To option on the left side of the window. Since the Primary tile is where a customer starts when going to pay, you must select a Redirect to option. There are three available choices:
You will choose a New Form since this is the first time you are creating a flow and do not have an existing form.
The major advantage of FlexForms compared to the legacy JPost system is that you can complete all form-related actions in one window. There is no need to switch between different sections in the Admin Portal to select prices or modify form settings.
To continue adding your first FlexForm, resume the process from the flow creation window:
1. Stay at the New Form option on the left side.
2. Enter a Form Name. This field is required and needs to be unique. The name serves the same purpose as with JPost forms and is not visible to consumers. You can dedicate a form only for special offers and name it, for example, “Black Friday Offer Form” or “Cross sale to testsite.com Form.”
3. Click View & Select Pricing and the window with prices pops up. Assign one or more entries to your form and click OK. The prices will appear on the form in the order you select them.
All the prices you created for use with JPost forms are available here. There is no extra work involved around established prices when migrating over to FlexForms.
You can select as many prices as you want. There is no need to create separate forms for individual subaccounts.
To create a new price, click the button on the bottom left side. You will be redirected to the Pricing Admin section of the portal. The procedure is the same as when creating prices for JPost forms.
If you use Dynamic Prices, make sure to check the box Allow for Dynamic Prices to be passed to form. Find more information on the Dynamic Pricing page.
4. Select the Layout of your form. You can choose between center, left justify, or right justify.
5. Choose a Color Theme for your form by clicking Select. A new window pops up where you can choose from the pool of predefined themes. You can modify your FlexForm by editing the CSS code or adding images.
The A/B Group section allows you to select a form for A/B testing. Using this option, you can test a form against other forms in the group. For example, you want to test if a form with less fields and a simple banner design converts better than a form with more fields. For more information, visit our A/B testing page.
In the Optional Fields section, you can add a product and form description, or select/modify a special offer.
Note: Special and promotional offers refer to upsales and cross sales. The customers will see the special offer as an addition to the prices already present on the form, not as discounts. Refer to the promotional offers page for more information on these options.
6. Click Save to save your first form.
Once you save your form, the system redirects you to the FlexForms System landing page. Here you can see all payment flows you create. Click the arrow to view the flow map.
The basic flow should look similar to this after you save your first form:
Read more on the payment flows and deny/approval paths on the FlexForms Payment Flows page.
Before using a form on a live website, you can preview it in the Forms Library.
To view the form you created:
1. Open the Forms Library by clicking the button at the top right part of the FlexForms screen. The FlexForm editor window pops up.
2. Select your form from the left side of the screen. If you created multiple forms, scroll to find it.
3. Click the Preview Payment Form button at the top right part of the window. A new tab opens, displaying the form you created.
If you want to make changes to the form, you can do so on the same FlexForm Editor window. You can make changes only while you are in the Sandbox mode. Refer to the Working With FlexForms page for more details.
When you are satisfied with how your form looks after you set up the payment flow, you need to promote the flow to live.
To promote a flow to live:
1. Locate the payment flow on the FlexForms Systems landing page.
2. Click Promote to Live button on the right side of the row.
3. Click Yes (Promote to Live) to confirm.
If you make a change to a single form in a live flow, you can promote a form to live instead of a payment flow.
To promote a form to live:
Note: When you promote a form to live, every payment flow that contains the updated form will include the changes as well. There is no need to go to every payment flow and promote it to live.
Once you promote your payment flow to live, you need to replace the old JPost form links on your website with FlexForm links. You can choose between a Web Widget and a URL for your call to action buttons.
To get a FlexForm URL or Widget Code:
1. Click the Widget Code link on the FlexForms Systems landing page.
2. Copy the Widget Code or URL on the right side and click Close. Remember that copying the links from the Sandbox section will not work and your form will not be active on the website.
3. Embed the widget code or URL in your website code. Widgets allow you to customize a call-to-action button within the Admin portal with the provided set of code.
Note: You only need to embed the code or link to your website ONCE. Any time you update a FlexForm, the changes will reflect on your website as soon as you promote a form to live.
You can also configure the look and behavior of your widgets and links in this section.
Congratulations! Your customers now can buy your products and services using the improved FlexForms.
FlexForms system allows you to customize the CSS color theme of individual forms to match the look and feel of your website. Please do not alter any input fields. CSS files with such modifications will not pass the company review.
To customize CSS:
Once we review the file, you will be able to use the updated look of your form.
FlexForms system contains many new functionalities and advanced features. This guide covered the most important options for a smooth transition from JPost to FlexForms.
Refer to the pages below for more information on the FlexForms system and its functionalities.
For any additional questions or assistance with the transition from JPost forms to FlexForms, feel free to contact CCBill Merchant Support 365 days a year.