FlexForms is a new way to set up a payment form for your product and a new way for your customers to make their purchases. This guide assumes that you are familiar with placing links on your own site and other web development tasks.
There are also some VERY important things for you to know about FlexForms as you use the system. We realize that many of you may not read this guide in its entirety, but if you do nothing else, click to read the following topics and review the information in :
We started this project with the goal of updating our old payment forms and to create an entirely new form system—FlexForms—that offers you a feature-rich experience and an easier process.
Using Flex Forms you’ll be able to create a consumer experience from the first “buy now” click, through as many forms as you’d like to present by creating Payment Flows, use a test environment called the Sandbox to work with and perfect your forms and flows before sending them live. The link to your live forms and Web Widgets will only ever need to be placed one time—you’ll no longer have to place a new version of a payment link every time you want to make a change to a form or flow.
There are lots of terms to familiarize yourself with, and we'll try to make it as easy as possible as we go along.
Once you’ve logged in to the Admin Portal, look for the FlexForms Systems mega menu; it should be on the left side of the mega menu bar. Hover over that, then click FlexForms Payment Links.
Note: For the best user experience, please avoid using Google Chrome when administering FlexForms.
The FlexForms feature selection allows you to manage different features within FlexForms:
A Sandbox is a developer’s term that indicates an area where you can try things and rearrange things in a sort of test mode. Our FlexForms sandbox works the same.
All Payment Flows and forms are created in a Sandbox mode. No external users can access the sandbox link and any links that you obtain from the sandbox can only be used when you are logged in to the CCBill Admin Portal. It’s meant only for testing.
So, what does that mean for you? It means that as soon as you promote a Payment Flow to Live—the environment that allows consumers to use the form you’ve created and perfected in the Sandbox—you will need to grab the Web Widget code or link URL from the Live environment and place that on your live site so that consumers can use your Payment Flow to make purchases from your site.
Let’s take look at a few items to learn about how the Sandbox and Live environments work.
At the top of the screen is a toggle switch. This switch indicates which mode you’re in.
If the slider is on the Sandbox side that means you’re currently working in the Sandbox. This mode is the default mode and allows you to create and edit Payment Flows and FlexForms.
If the slider is on the Live side, you’re looking at live Payment Flows. You cannot make any changes in Live Mode. This is where you can view your live Payment Flows and get Web Widget and URL code for live forms.
THE INFORMATION IN THIS SECTION IS SIGNIFICANT!! If you read nothing else in this guide, please read this section.
Forms and Payment Flows that have been “Promoted to Live” are the forms that your consumers can use to purchase your goods and services. The forms and Payment Flows you see when in Sandbox mode are different from the forms and Payment Flows that exist in Live Mode.
The LINKS that you get from the Sandbox Mode page are different from the links that you get from the Live Mode page. The links on the Sandbox page are for testing. If you’ve placed a URL or Web Widget code from the Sandbox on your site NO CONSUMERS WILL BE ABLE TO PURCHASE GOODS OR SERVICES USING THAT FORM. The only people that Payment Flow will work for are you and other authorized users on your account and that link will work while one of you is logged in to the CCBill Admin Portal.
Later in this document when we talk about Web Widgets and URLs (in the Testing Payment Flows and Placing Payment Flow Links sections) we’ll talk more about how to tell the difference between a Live Payment Flow and a Sandbox Payment Flow.
A Payment Flow allows you to create a path for your consumers to follow when submitting payments. When a purchase is approved they can be sent one way, when declined they can be sent a different way. This lets you control the experience that consumers have and allows you to cascade declined consumers to other forms or other payment processors in order to increase your chances of making a sale. Because of the unique new set up for FlexForms, you may make changes to your payment flows without having to change the links you’ve placed on your site or having to reset the forms.
From either Sandbox or Live Mode, click the Add New link at the top left (if you’re in Live Mode the system will automatically toggle you to the Sandbox.
Click to enlarge
Clicking that link will open up the PRIMARY TILE for the payment flow. There’s a visual Payment Flow Map that hides behind this open tile, but essentially you’re actually editing the first tile in the flow.
Most of the items on that first edit screen are pretty self-explanatory if you’re already familiar with CCBill’s current forms and using our pricing admin, but there are a couple of things that we want to point out to you.
The top of the window always tells you which tile you are currently working on:
Along the left side of the screen there are several redirect options (New Form, Existing Form, or URL).
Your Primary Tile is the starting point for that particular Payment Flow, so you must select an option from the Redirect To section. Select your option here before you do any editing in the middle area of the screen as the options are different depending on your selection here.
Each Payment Flow has to have a unique name. You’ll notice, though, that there are sometimes two name fields, one for the Form (if you’re using a New or Existing Form redirect) and one for the Payment Flow. This Payment Flow field only displays the FIRST time you edit the Primary Tile (when you’re creating the Payment Flow), but it can cause a bit of confusion if you’re not paying attention.
After you’ve saved the first tile of your Payment Flow, you’ll be able to see a graphic representation of the Payment Flow.
Click to enlarge
You can edit that Primary Tile any time by clicking on the tile and making changes to the options, or editing the form in the Form Library under Manage my Payment Forms.
As with any map, the key is to know how to read the map. You know how to find the Primary Tile, but let’s talk about the other items in the map.
The tiles directly below and to the right of the Primary Tile are called Redirect Tiles. By default they are created for every new Denial redirect you add and will always default to the same state: No Redirect. In the No Redirect state the consumer will not be taken anywhere after performing the steps required from the Primary Tile. So, if the consumer is declined or approved when trying to process a transaction in a flow with No Redirect, they will see the decline or approval message and will not be taken anywhere else. No approval page, no new form to try again, and no redirect to your website.
If remaining on the approval or denial screen after a transaction is not what you want the Payment Flow to do, you need to click on the Modify link of one of the tiles to add your desired behavior.
Right now we want to modify the Deny tile so that when a consumer is declined on a transaction, they will be sent somewhere else to try again. But how do we know which tile to click?
The Path Markers are placed to help you know in what instance a consumer will hit the next tile, if one exists. In this example, none exists yet, so we’re going to click Modify in the No Redirect box to the right of the Primary Tile because the Deny path marker points to that tile.
Clicking that brings us to a screen that looks quite familiar.
This screen looks very similar to the screen you saw when you created your Primary Tile and the Payment Flow. There are a few differences. The window title is Deny Path and there’s no Payment Flow Name. Everything else is similar.
Just like that screen, it’s important that you set your Redirect To area (where the brackets are in the image) before you modify other things on the screen, as the options change based on what you want to redirect to.
Modifying the Approval Path is still similar, but your options are limited. You can’t redirect to a New or Existing Form, but you may redirect to a URL or add a URL to the approval page of the tile for the consumer to click on instead of being automatically redirected to.
The unavailable items are grayed out so that you can’t click on them. This is a good place to add the link to your members’ area or a similar location.
When you’re modifying a tile and adding an existing form to the tile, you’ll run into the new Form Carousel. The Carousel gives you a small preview of forms in your library and lets you scroll through the forms using the navigation arrows on either side of the carousel.
You can use the Form Filter to narrow the forms you want to see in the Carousel by status. This is especially helpful if you want to make a Payment Flow that you can promote to live without having to wait—using a Payment Form that is already approved by CCBill will eliminate the wait period (usually 24-48 business hours) and allow you to promote the Payment Flow to live as soon as you’re satisfied with the Payment Flow.
The arrows on both sides of the carousel will rotate the carousel to the next form in the library:
The form in the middle of the carousel displays as a thumbnail with the form name below it. If you want make changes to a form you can do it by clicking Modify This Form at the bottom of the screen while the form is centered.
There are two ways to work with Forms in FlexForms. One way is to create and make changes to forms from within Payment Flows, which you will learn about in the Modifying a Payment Flow section later. The other way to work with forms is to use the FlexForms Editor. Regardless of which way you choose to make and edit your forms, every form is in the same collection and you only have one collection of forms on your account. You can access the FlexForms Editor from the drop-down navigation at the top left of the screen:
The first available option is to create a new form and you should definitely click this link if you want to create a new form or two to add to your Form Library.
The left side of the window displays a scrollable list of all of the forms in your FlexForms Library. All of the options on the screen apply to the active form, the one highlighted in this form list. In the example below, the form Test 1 is selected, so all of the information displaying on the screen pertains to that form.
The top of the FlexForms Editor screen displays some data about the selected form for you and gives you a little information about the status of that form:
After selecting the FlexForm you want to edit, make changes to the form in the center area using the options given. Click on a property name to display the options for that form property (Color Theme is selected in this example, giving us the option to edit the CSS associated with the FlexForm).
Each property has its own save button, located at the bottom of the screen, and the save button is only active if you’ve made changes.
The two-column option has been retired as of FlexForms 2.0. CCBill still offers support for existing two-column forms.
Note: The maximum number of Promotional Offers may depend on underlying Client Rules.
To take a look at what your changes have done to the form, use the Preview Payment Form button on the right.
The form will open in a new tab for you to review.
This is something you can check in the FlexForms Editor. Select a FlexForm and look at the top of the Editor. The status will either be:
After changes to a form are approved for use (typically 24-48 hours), promoting that form to Live acts a little differently than promoting a Payment Flow to Live Mode does.
If you click Promote to Live? the form will be updated with the new version in EVERY PAYMENT FLOW that has this form as part of its flow. You do NOT have to promote each flow that contains the updated form to live one at a time when you update a form.
This update will be in effect as soon as you click that button and confirm the selection, and you will not have to update any payment links on your site for it to work in your Live Payment Flows that contain that form. Of course, any Payment Flows that aren’t currently live but contain that form will be updated with the new version of the form as well.
The Sandbox / Live concept is new to the CCBill Admin, and some of the concepts are a bit tricky. Earlier we talked about how to tell if you’re in Sandbox or Live and we’ve touched on a few other concepts that depend on your working in Sandbox Mode.
If you’re in Sandbox Mode and have some Payment Flows set up already, you may have noticed that the far right side of the screen has a Status column. This indicates the status that its respective Payment Flow is in.
Let’s talk a little about what each status means: