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.
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.
This will take you to the FlexForms landing page, where you can create and edit Payment Flows.
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.
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.
To create a new FlexForms payment flow:
1. Click the Add New button.
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:
Select the A New Form option, as there are no existing forms.
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.
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.
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.
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.
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.
Click a Redirect Tile to modify the default setting.
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.
2. Click the A URL option to set up a redirection to a custom URL.
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.
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.
2. Like with the Primary Tile, merchants can redirect customers whose transactions have been declined to:
3. Click Save to apply the denial redirect path to the payment flow.
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.
2. Select a form from the scrollable area on the left.
3. Expand the All Settings tab. The advanced options allow merchants to:
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.
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.
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:
3. Select Save to Sandbox to save the changes.
4. Close the Link Codes window.
5. Click Promote to LIVE to push the Payment Flow to the Live environment.
6. Click Yes (Promote to Live) to confirm your choice.
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.
8. The right side of the Link Codes window displays the Widget Code and URL necessary to launch the LIVE version of the Flow.
9. Copy the configured LIVE Widget Code Snippet or URL and embed it in your website's code to use the Web Widget functionality.
Now customers can click on the button or hyperlink to open the Payment Flow.
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.
You can use the Image Library to upload banner images and view all the images uploaded to the FlexForms library filtered by approval status.
Clicking an image thumbnail in the left pane displays a larger version on the right, along with the image’s vitals.
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.
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.
However, this is an advanced feature and is not required for setting up a basic configuration.
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.
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:
You will get an approval/denial message and email just like a consumer would.
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: