JPost to FlexForms Guide
IntroductionThis 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.
FlexForms OverviewCCBill 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.
Benefits of Switching to FlexFormsOur new responsive payment processing system brings many advantages to the table in comparison to JPost legacy forms.
Some of the benefits are:
- All payment types on one form. No matter the payment method or geo location of a potential consumer, one form covers every scenario.
- One form for all devices. FlexForms adjust to the screen size and the device type. Only one responsive form is needed to cover desktop, tablet, and smartphone devices.
- A/B Testing. Utilize this feature to test the performance of payment forms and flows against each other. A/B testing allows you to determine which form or page yields the best results.
- CCBill Pay. CCBill’s proprietary online service for storing payment methods, only available with FlexForms. Consumers can store up to 25 payment methods for a quicker checkout experience. CCBill Pay makes it easy for your consumers to come back and complete future purchases.
Before You StartThere 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:
- You need to select All in the Client Account drop-down menu. If a subaccount is set, it is possible to view the options, but you cannot manage FlexForms.
The following message pops up in that case.
- Make sure you obtain links from the Live Mode for your live website. Links from the Sandbox mode will not work for your consumers. Only logged in users can preview and test in the Sandbox mode.
Transition from JPost to FlexFormsSwitching 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.
Payment Flow vs. Payment Form.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:
Create a Payment FlowIn 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:
- Log in to the CCBill Admin Portal.
- Navigate to the FlexForms Systems mega menu.
- 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.
- Click Add New. A window pops up where you create the primary (first) tile in the payment flow.
Note: if you are in the live mode, the system asks you to switch over to Sandbox first. Click OK. (Continue to SANDBOX) to confirm.
- 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.
- 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:
- A New Form. Create a new form. The form will be available in the Forms Library for later use.
- An Existing Form. You can select this option if you already created a FlexForm.
- A URL. Add a redirect URL to a form. This can be any URL, including another processor’s form URL as well. The system automatically saves the links in the URLs Library.
Create a FlexFormThe 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.
Refer to the promotional offers page for more information on these options.
Note that 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.
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.
Preview a FlexForm in Sandbox ModeBefore using a form on a live website, you can preview it in the Forms Library.
To view the form you created:
- Open the Forms Library by clicking the button at the top right part of the FlexForms screen. The FlexForm editor window pops up.
- Select your form from the left side of the screen. If you created multiple forms, scroll to find it.
- 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.
Promote a Payment Flow and FlexForm to LiveWhen 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:
- Locate the payment flow on the FlexForms Systems landing page.
- Click Promote to Live button on the right side of the row.
- Click Yes (Promote to Live) to confirm.
To promote a form to live:
- Open the Forms Library.
- Select your form from the left side of the screen. If you created multiple forms, scroll to find it.
- Click Promote to Live? at the top of the editor window.
- Click Yes (Promote to Live) to confirm your choice.
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.
Replace Live JPost form URLs with FlexForm URLsOnce 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:
- Click the Widget Code link on the FlexForms Systems landing page.
- 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.
- 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. Read more on the WebWidgets page.+
NoteYou 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.
Congratulations! Your customers now can buy your products and services using the improved FlexForms.
Customize CSS of your FlexFormsFlexForms 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:
- Download the default FlexForm CSS file.
- Make the changes to the file and save it.
- Open the Forms Library by clicking the button at the top right part of the FlexForms screen.
- Select a form from the left side of the screen. If you created multiple forms, scroll to find the form you want to edit.
- Click Upload a Theme File to upload the edited CSS file.
- Click Browse to locate the file on your computer.
- Click Insert.
Once we review the file, you will be able to use the updated look of your form.
ResourcesFlexForms 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.
- FlexForms User Guide. Browse through an extensive guide with in-depth information.
- FlexForms Quick Start Guide. A quick reference to the essential sections of the FlexForms system. Advanced functionalities are not covered.
- Dynamic Pricing. Learn more about passing variables into CCBill FlexForms.
- FlexForms Sandbox and Live Mode. Make sure to read this section to avoid using wrong URLs.
- FlexForms Promotional Offers. Learn how to set up promotional offers on your FlexForms.
- Images and URLs. You can upload custom banners to your FlexForms. Visit this page about the requirements for image sizes. The article also contains information about acceptable URL formats.
- Third Party Payment Processors and Modules. Learn how to utilize third party payment processors with FlexForms, as well as how to install third party modules.
SupportFor any additional questions or assistance with the transition from JPost forms to FlexForms, feel free to contact CCBill Merchant Support 365 days a year.
- Hours: 24/7
- Toll-Free: 800.510.2859
- Email: email@example.com
- Live chat
- International number listing: https://www.ccbill.com/contact-us-phonenumbers.php