Loading...
 

Introduction
This document is provided as a technical resource to all FlexForms users. It is intended to help merchants configure FlexForms and engineer Payment Flows. Some of the advanced options, such as Dynamic Pricing and A/B testing, are mentioned only briefly and you will find instructions on these advanced options in other company documents.

The targeted audience of the Quick Start Guide are Web Developers and Merchants who are setting up FlexForms which are to be used on commercial websites.

Note: For best user experience, please avoid using Google Chrome when administering FlexForms.

Version
This quick start guide will lead you through the form-creation process in FlexForms. The document was published on August 24th, 2016.

Overview
FlexForms is the result of the company's continuous effort of updating our existing legacy forms. CCBill has created a payment flow system which is simple to use, yet full of features. By creating Payment Flows you will engineer a pleasurable customer experience and determine the path your customers take when clicking that first Buy Now! button.


Getting Started with FlexForms

In order to open the FlexForms System you need to:

  1. Log in to the CCBill Admin Portal at https://admin.ccbill.com/loginMM.cgi.
  2. Once you log in, hover over the FlexForms Systems mega menu.
  3. Click on FlexForms Payment Links.
This will take you to the FlexForms landing page, on which you can create and edit Payment Flows.

Sandbox and Live Environment

The Sandbox is a test environment in which you create, edit, and perfect your Payment Flows before displaying them to your customers. All Payment Flows are created in Sandbox mode, and external users cannot view Payment Flows in the Sandbox.

When you perfect your Forms and Payment Flows and want to display them to customers, you need to PROMOTE them to the Live Environment. The toggle switch in the upper-left corner of the FlexForms Payment Links screen indicates in which mode you are in.

Mode Toggle Switch
Mode Toggle Switch

For now, stay in Sandbox mode until you perfect a Payment Flow.

Launching a Payment Flow

  1. Open the FlexForms Systems menu.
  2. Select FlexForms Payment Links.
  3. Click the Add New button in the upper-left corner of the screen. You are now essentially editing the first tile of the Payment Flow.
  4. Enter a Name for your Payment Flow in the top field.

    Primary Tile
    Primary Tile
  5. There are three (3) Redirect To options:
    • New Form. Create a new FlexForm.
    • Existing Form. Use a previously made Form.
    • URL
Your Primary Tile is the starting point of your Payment Flow, so you MUST select a Redirect To option.

Creating a FlexForm

  1. Select New Form, as you do not have any existing forms.
  2. Set basic Form settings:

    Setting Description
    Enter a Form Name This will be the name of your Form.
    Select the Pricing Assign Price Points to the Form. This will be the pricing offered to customers.
    Select a Layout Centered, Right Justified, or Left Justified.
    Select a Color Theme Select a predetermined Color Theme.

  3. Optionally, you may want to:

    Setting Description
    Set up Special Offers These are secondary offers which are presented to customers as discounts.
    Write a Form Description The Form Description is intended to simplify differentiating between forms. For example, you can enter Denial Form if you intend to use it as a Deny path.
    Write a Product Description The description of the product or membership being sold on your subaccount website.

 FlexForms Editor

All of these settings can be modified in the FlexForms Editor at every moment. Pop up the Editor by clicking the Forms Library button in the upper-right corner of the screen. There you can create new forms as well, by clicking the Create New Form button.


Selecting the Price

Price Points are your existing pricing options which you assign to a Form. To assign a Price Point:

  1. Click View & Select Pricing.
  2. Click on check boxes at the far left of the window in order to assign Price Points. You may select as many price points as you wish.
  3. Click OK to confirm your selection.

 Create New Price

Click Create New Price to create a pricing option. Select billing type, base currency, initial price, initial billing period, recurring price, recurring billing period, and the number of rebills using the fields provided. Click the Save Price Point button to save your pricing option.


Payment Flow Map

After you have created your Primary Tile, you will see a graphic representation of the Flow.

Edit your Primary Tile by clicking on it. Beside your Primary Tile are Redirect Tiles which are automatically made, and their default state is No Redirect. So, if a customer is declined or approved when making a transaction, they will see the default approval or decline message.

Click on a Redirect Tile to modify it.

Approval Path

This is the path customers take when their transaction is approved. The Approval Tile is always below the Primary and Deny Tile. When editing the Approval Path, your options are limited. You can redirect to a URL, or make a URL available for the consumer to MANUALLY click on.

Approval Path
Approval Path


Deny Path

This is the path consumers take when they are declined on a transaction. They will be redirected to the deny path to try again. The Deny Tile is always to the right of the Primary Tile.

Deny Path
Deny Path

To set up a Deny Path:

  1. Click the Deny Tile. A new window has opened. It will be very similar to the one you saw when you created the Primary Tile.
  2. Select one of several redirect options along the left side of the screen.
    • New Form. Create a new FlexForm as you did for the Primary Tile.
    • Existing Form. Use a previously made Form.
    • URL. Add an external or internal link. Send customers back to your website or to a third party payment form.

URLs Library

The URLs Library is where you will find every external or internal link you ever added to a Payment Flow. In the URLs Library you are able to add URLs and customize them. Open the URLs Library by clicking the URLs Library button on the right side of the FlexForms screen.

Use the Add Name/Value Pairs to pass information to external links. This is how you can manually set up what you need to make a third party payment processor work. However, this is an advanced feature and it is not needed for setting up a basic configuration.

Customizing Advanced Form Properties

FlexForms can be modified in terms of appearance and can also be integrated with Google Analytics and other payment processors. To modify advanced options:

  1. Open the Forms Library.

    Forms Library
    Forms Library
  2. Select a Form from the scrollable area on the left.
  3. Open the All Settings tab. A list of settings will be on the left.
With advanced options you can:

  • Integrate with Google AdWords and Google Analytics.
  • Select the layout, add images, and select whether to display secondary credit card logos.
  • Select a Color Theme or upload your own custom theme.
  • Set Loyalty Discounts, Promotional Offers, and enable Regional Pricing.
  • Set the data displayed to customers on the approval page.
  • Deactivate a form if you do not intend to use it anymore.

    FlexForms Editor
    FlexForms Editor
As this document tackles the most important steps of launching a FlexForm, advanced options will not be dealt with in details. For further instructions on advanced form options refer to the FlexForms User Guide.

However, customizing the visual appearance of a form will be explained in the section below.

Visual Adjustments

CCBill offers predetermined visual themes, but FlexForms can be visually modified to resemble the look and feel of your website. It must be noted that while the visual appearance can be customized, the action fields remain the same, and all visual modifications are subject to approval by CCBill, LLC.

To customize the look of a Form:

  1. Open the Forms Library.
  2. Select a form from the scrollable area on the left.
  3. Open the All Settings tab. A list of settings will be on the left.
  4. Look for the following settings in order to add your images to the Form:
Setting Description Max Dimension
FlexForms Banner Image Select an image for your banner. It will appear at the top of the Form. 960 x 100
Approval Message Add an image to the approval page. 150 x 270
Image 1/2 Topmost and lowermost on Form. Depending on the layout you might not be able to add these images. 150 x 270
Promotional Offers Add images to compliment your promotional offers. Dimensions vary depending on the number of images and position.

All uploaded images can be found in the Image Library. Click on the Image Library button in order to pop up the Image Library.

Besides images, adjust the visual appearance of your FlexForm by setting the Color Theme and Card Logos option.

Preview a FlexForm

To preview a FlexForm:

  1. Open the Forms Library.
  2. Select a form from the scrollable area on the left.
  3. Click Preview Payment Form.
The preview represents the major changes you have made.

Test CCBill Pay for Yourself

While previewing the changes you have made, you can test the CCBill Pay option and experience it for yourself as well. For the initial release of CCBill Pay, however, there are NO dummy accounts. You need to have a real CCBill Pay account in order to log in and test the environment.

Promote a FlexForm to Live

Promoting a FlexForm to Live means that your Payment Flow containing that form will be updated as well. There is no need to update the code on your website after making changes to a Live FlexForm.

To promote a FlexForm to Live:

  1. Open the Forms Library.
  2. Select a FlexForm from the scrollable area on the left.
  3. Click Promote to Live?
  4. Click Yes (Promote to Live) to confirm your choice.

Activating your Payment Flow

Web Widgets and URLs

This is essentially how customers are redirected to a Payment Flow. They click on a Web Widget button or hyperlink to be redirected to the Flow. The Web Widget can be modified to appear as a button or hyperlink with different wording.

  1. Open the FlexForms Systems menu.
  2. Select FlexForms Payment Links.
  3. Click on the Widget Code link in order to modify the Web Widget.
  4. On the Link Codes window you can set the visual appearance of the Web Widget:
    • Label. There are four (4) predetermined labels, depending on the type of product in offer.
    • Button or Link? If button, you can select the color and style.
    • Form opens in a new tab? If Same tab, the screen refreshes and displays the payment form.

Promote to Live

In order to push a Payment Flow to Live (meaning to link a Payment Flow to your website) you need to:

  1. Open the FlexForms Systems menu located at the far right in the CCBill Admin.
  2. Click FlexForms Payment Links.
  3. Click Promote to Live in the row of the Payment Flow you wish to push to the Live environment.
  4. Click Yes (Promote to Live) to confirm your choice. Upon Promoting to Live, a WebWidget Code will be generated automatically.
  5. Click the Widget Code button in the row of the recently promoted Payment Flow. The Links Code window will open. The right side of the Link Codes window will display the Widget Code and URL that will launch the LIVE version of the Flow.
  6. Copy the configured LIVE Widget Code Snippet or URL and embed it in your website's code to make use of the WebWidget functionality.
Now customers can click on the button or hyperlink in order to open the Payment Flow.

Live Codes
Live Codes


Support Options

If you need any further assistance in setting up FlexForms or if you have any questions regarding FlexForms, contact Merchant Support via email at merchantsupport at ccbill.com, through an online chat request, or call Merchant Support at 800.510.2859. We offer 24/7 around the clock support.