Loading...
 

JPost to FlexForms Guide

Introduction

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.

FlexForms Overview

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.

Jpost Flexform

Benefits of Switching to FlexForms

Our 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 Start

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:

  • 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.
Flexform Message
  • 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.
Please read important information concerning the form status and form URLs.

Transition from JPost to 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.

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:

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


Create a Payment Flow

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.

    FlexForm 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.
    Sandbox Mode
  4. 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.
    Flexform Payment Link Message
  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.

    Payment Flow Name
  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:
    • 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.
You will choose a New Form since this is the first time you are creating a flow and do not have an existing form.

Create a FlexForm

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:

Flexform Create
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.

View Modify Prices Flexform
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

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.
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.

Payment Flow View
The basic flow should look similar to this after you save your first form:

Basic Flow Flexform
Read more on the payment flows and deny/approval paths on the FlexForms Payment Flows page.

Preview a FlexForm in Sandbox Mode

Before 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.
FlexForm Editor
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 Live

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:

  • 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.

    Promote To Live Flexform
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:

  • 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.

 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.

Replace Live JPost form URLs with FlexForm URLs

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:

  • 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.+

     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.

Web Widget Flexforms
Congratulations! Your customers now can buy your products and services using the improved FlexForms.

Customize CSS of your 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:

  • 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.
Edit Css Flexforms

Once we review the file, you will be able to use the updated look of your form.

Resources

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.

Support

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.