FlexForms Quick Start Guide

This step-by-step guide is a technical resource intended for merchants and web developers. It goes through the process of creating a form in the FlexForms system and helps merchants configure their payment flows and forms.

Detailed instructions for implementing advanced FlexForms options, such as Dynamic Pricing, cascades, A/B testing, and custom CSS, are explored in standalone guides.

How to Launch a Payment Flow

Step 1: Navigate to the FlexForms System

To start creating your new FlexForms payment flows and forms:

1. Access the Admin Portal.

2. Set the subaccount dropdown menu to All.

3. Open the FlexForms Systems mega menu.

4. Click FlexForms Payment Links.

Steps to access FlexForms in the CCBill Admin.

This will take you to the FlexForms landing page, where you can create and edit Payment Flows.

Step 2: Sandbox and Live Environment

Sandbox is a test environment for creating, editing, and refining your Payment Flows before displaying them to customers. No external users can access the sandbox form, and any links from the Sandbox can only be used when you are logged in to the CCBill Admin Portal.

Toggling FlexForms Sandbox and Live environments.

Once you put the finishing touches to 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 FlexForms Payment Links screen's upper-left corner indicates which mode you are in.

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

Step 3: Add a Payment Flow

To create a new FlexForms payment flow:

1. Click the Add New button.

Add new FlexForms payment flows.

2. Enter a Name for the new Payment Flow.

3. The Primarytile is the starting point of the Payment Flow. You must select one of the 3 Redirect To options:

  • A New Form. Create a new FlexForm.
  • Existing Form. Use a previously made Form.
  • URL. Redirect to a custom URL.

Select the A New Form option, as there are no existing forms.

Enter Payment Flow name.

Step 4: Create Payment Form

1. Enter a Form Name. The form name is an internal designation and is not visible to customers.

The Form Name cannot contain special characters.

2. Select the form Layout. The options include Centered, Right Justified, or Left Justified.

Enter a form name in FlexForms.

3. (Optional) Set up Special Offersby clicking the Select/Modify button. These are secondary offers that are presented to customers as discounts.

4. (Optional) Write a Form Description. The Form Description is intended to make it easy to differentiate between forms. For example, you can enter Denial Form if you want to use it as a Deny path.

5. (Optional) Write a Product Description. The description of the product or membership being sold on your subaccount website. A custom Product Description needs to be approved by Merchant Support before it is visible on the payment form.

Adding a custom product description in CCBill FlexForms.

Step 5: Set up Pricing

The View & Select Pricing option allows you to set price points to be displayed on the form. To assign a price point:

1. Click View & Select Pricing.

2. (Optional) Allow Dynamic Prices to be passed to the form by checking the box. Dynamic Pricing allows you to create new pricing options dynamically by passing variables into CCBill FlexForms.

Select price points in FlexForms menu.

3. Check the boxes at the far left of the window to assign prices. You can select multiple price points. The prices appear on the form in the order that they were clicked.

4. (Optional) Select Create New Price to create a new pricing option. You will be redirected to the Pricing Admin, where you can create pricing from scratch or modify your current price points.

5. Click OK to confirm your selection.

Selecting prices to display on FlexForms.

Step 6: (Optional) Set Up an Approval and Denial Path

After creating a Primary Tile, the system displays a graphic representation of the payment flow.

Selecting the Primary Tile allows merchants to modify payment form settings. The FlexForms system generates approval and denial Redirect Tiles automatically. The default No Redirect status displays an automated approval or decline message if the customer’s transaction is declined or approved.

Different tile types in FlexForms.

Click a Redirect Tile to modify the default setting.

Approval Path

The Approval Path is the path customers take when their transaction is approved. The Approval Tile is always below the Primary and Deny Tile.

1. Select the Approval Tile to modify the approval path.

Approval redirect path tile in FlexForms.

2. Click the A URL option to set up a redirection to a custom URL.

The Approval URL path in Flex|Forms.

3. Add a new URL or redirect customers to a URL previously saved in the FlexForms URLs Library.

4. Use the slider to configure the number of seconds before the customer is automatically redirected.

5. Save to set the new approval redirect URL.

Settings for the FlexForms Approval path.

Deny Path

This is the path consumers take when their transaction is declined. Customers are redirected to the deny path to try again. The Deny Tile is always to the right of the Primary Tile.

To set up a Deny Path:

1. Click the Deny Tile.

The Deny path tile in FlexForms.

2. Like with the Primary Tile, merchants can redirect customers whose transactions have been declined to:

  • A New Form. Create a new FlexForm as you did for the Primary Tile.
  • An Existing Form. Use a previously made Form.
  • A URL. Add an external or internal link. Send customers back to your website or a third-party payment form.

3. Click Save to apply the denial redirect path to the payment flow.

Setting up the Deny path redirection in FlexForms.

Step 7: Customizing Form Properties

FlexForms can be modified in terms of appearance and can also be integrated with Google Analytics, ecommerce platforms, and used to create cascades with other payment processors. To modify existing payment forms:

1. Open the Forms Library.

Accessing the FlexForms Library.

2. Select a form from the scrollable area on the left.

3. Expand the All Settings tab. The advanced options allow merchants to:

  • Integrate payment forms with Google Analytics and Google Ads.
  • Choose the layout, add images, banners, and select whether to display secondary credit card logos.
  • Select a Color Theme or upload a custom theme.
  • Set Loyalty Discounts, Promotional Offers.
  • Enable Regional Pricing.
  • Set the data displayed to customers on the approval page.
  • Deactivate a form.
FlexForms setting in the FlexForms Library.

This document goes through the most important steps of launching a FlexForm. Advanced options are not dealt with in detail. For further instructions on how to set up advanced features, refer to the standalone guides for each option.

4. Save Properties once you have made the necessary changes. The Save Property option is active only if you make changes.

5. Click Preview Payment Form to review the changes made to the existing payment form.

Preview created FlexForms.

Step 8: Activating your Payment Flow

Before activating a payment flow, you need to insert a Web Widget button or hyperlink on your website. Customers who click the widget button or payment link are redirected to the payment form.

The Web Widget can be modified to appear as a button or hyperlink with different wording. To modify the widget:

1. Click the Widget Code link for a specific payment flow.

Editing FlexForms Web Widget code.

2. The Link Codes window provides both the Sandbox and Live links for accessing the payment flow. The Sandbox section allows merchants to modify the visual appearance of the Web Widget:

  • Label. There are four (4) predetermined labels, depending on the type of product on offer.
  • Button or Link? The button option allows you to select the button’s color and style.
  • Form opens in a new tab? If merchants select the Same tab option, when the customer clicks the payment link, the screen refreshes and displays the payment form.

3. Select Save to Sandbox to save the changes.

4. Close the Link Codes window.

Editing links for accessing payment flows.

5. Click Promote to LIVE to push the Payment Flow to the Live environment.

Promote FlexForms payment flow to Live.

6. Click Yes (Promote to Live) to confirm your choice.

Confirm promoting payment flow to Live environment.

Promoting a payment flow to the Live environment prompts the FlexForms system to generate a Web Widget code automatically.

7. Click the Widget Code button in the recently promoted Payment Flow row.

Access payment flow widget code.

8. The right side of the Link Codes window displays the Widget Code and URL necessary to launch the LIVE version of the Flow.

Copy payment flow widget code.

9. Copy the configured LIVE Widget Code Snippet or URL and embed it in your website's code to use the Web Widget functionality.

Embed FlexForms widget code on website.

Now customers can click on the button or hyperlink to open the Payment Flow.

Image Library

Images that you upload to FlexForms are stored in the Image Library. Merchants can access the Image Library button on the right of the FlexForms screen.

FlexForms Images Library tab.

You can use the Image Library to upload banner images and view all the images uploaded to the FlexForms library filtered by approval status.

Upload new image to FlexForms.

Clicking an image thumbnail in the left pane displays a larger version on the right, along with the image’s vitals.

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 can add URLs and customize them. Open the URLs Library by clicking the URLs Library button on the right side of the FlexForms screen.

Accessing the FlexForms URLs Library.

Use the Add Name/Value Pairs to pass parameters to external links and third-party services. This is how you can manually set up third-party payment processing.

Add Name/Value pairs in FlexForms.

However, this is an advanced feature and is not required for setting up a basic configuration.

FlexForms Editor

The settings for each Payment Flow can be modified in the FlexForms Editor. Pop up the Editor by clicking the Forms Library button in the screen's upper-right corner.

Accessing the FlexForms Editor tab.

Conducting Test Transactions

CCBill merchants can set up a test user in the Admin Portal and conduct test transactions to confirm if their FlexForms payment flows and forms work as intended.

To make a test transaction:

  1. Click the Web Widget of one of your forms to launch the form.
  2. Use test transaction credentials you previously created for a test transaction user. Access the form through a designated IP address.
  3. Use test credit card numbers in order to simulate a transaction.
  4. For approvals, use CVV > 300. Everything below this value will result in a denial.

You will get an approval/denial message and email just like a consumer would.

Merchant Support

If you need any further assistance in setting up FlexForms, or if you have any questions regarding FlexForms contact our 24/7 Merchant Support service: