How to Integrate Your Form With CardConnect

Integrating your form with CardConnect lets you securely collect payments directly from your respondents without redirecting them from your form experience. By connecting your CardConnect account, you can streamline transactions, reduce manual processing, and ensure sensitive payment data is handled with advanced security measures.

This integration is ideal for businesses and organizations that need a reliable way to accept credit and debit card payments for registrations, product orders, service fees, donations, and more. Once set up, payments will be processed automatically whenever a form is submitted, helping you save time and maintain accurate transaction records.

With CardConnect, you can do the following:

• Sell Online Products 
• Sell Merchandise 
• Collect Donations Online 
• Accept Custom Payments

Setting up CardConnect Integration Using the Legacy Method

Adding CardConnect to your form lets you start accepting secure online payments quickly and efficiently. By properly configuring the integration, you can ensure transactions are processed smoothly and payment details are handled safely.

Whether you’re setting up a new form or updating an existing one, integrating your form with CardConnect takes no time at all—here’s how:

1. In Form Builder, click on Add Element on the left side of the page.

2. Now, in the Form Elements menu, under the Payments tab, search for CardConnect and click on it. Or just drag and drop it to where you want it on your form.

3. Next, in the CardConnect Integration window on the right, set up these things first:
   • Merchant ID — You can find the Merchant ID under the My Accounts page of your CardConnect account.
   • API Username 
   • API Password — If you haven’t created an API Username and Password, visit CardConnect – Creating Credentials for the steps.

4. Then, scroll down to the middle part and continue to configure these things:
   • Currency — CardConnect supports USD only.
   • Add Captcha — Optionally select or add a captcha through the dropdown menu.
   • Payment Type — Select the type of payment you want to collect: Sell Products, User-Defined Amount, or Collect Donations.
5. Once everything’s set for the Sell Products option, click on Continue to start creating products for your payment field.

For the User Defined Amount and Collect Donations payment types, just click on Save at the bottom.

For the User-Defined Amount and Collect Donations payment types, you can enter a description that’ll be shown under the payment box on your form. You can also suggest an amount and set it as the minimum, or use a Form Calculation widget to get the price, which is useful when you want to pass a calculated amount to your payment field instead of asking users for it. For a full breakdown of how to do it, head over to our guide on How to Pass a Calculation to a Payment Field.

When you expand the Additional Gateway Settings of the CardConnect Integration section, you’ll see this list of options you can adjust based on the payment type you chose:

• Sandbox Mode — Toggle this on to enable CardConnect’s testing environment. Scroll down below to know more. 
• Clickable Image Preview — This is only available with the Sell Products and Sell Subscriptions payment types and is enabled by default. You can toggle this off to prevent customers from enlarging product or subscription images.
• Show Total Price on the Form — Enable this to display the total amount directly on your form before users are redirected to the checkout page.
• Credit Card Label Text — Enter the label for the Credit Card section of the payment field. You can leave it default. 
• Users Can Select Multiple Products — Available only with the Sell Products payment type and enabled by default. Toggle it off to allow customers to select only one product per submission.
• Show Decimals on the Form — Toggle this on to display decimals for pricing.
• Decimal Separator — Choose the character to separate decimals (e.g., a period or a comma).

Setting Up CardConnect with Reusable Payment Connections

Jotform’s Reusable Payment Connections feature allows you to set up payment integrations like CardConnect and reuse the same configuration on your other forms or apps created with Jotform, without needing to configure it again. Here’s how to set it up:

1. In Form Builder, click on Add Element on the left side of the page.

2. Now, in the Form Elements menu, under the Payments tab, click on CardConnect to add it to your form.

3. Then, in the Payment Properties section that opens on the right side of the page, click on the Plug icon.

4. Next, in the Add CardConnect Connection window, configure these things:
   • Mode — Select Live mode to process real transactions or Sandbox mode to test payments in a secure, non-production environment.
   • Connection Name — Enter a custom label to identify this CardConnect connection within your account, especially helpful if you manage multiple payment integrations.
   • Merchant ID — You can find the Merchant ID under the My Accounts page of your CardConnect account.
   • API Username — Enter your API Username.
   • API Password — Enter your API Password. If you haven’t created an API Username and Password, visit CardConnect – Creating Credentials for the steps.
5. Now, click on Connect with CardConnect to authenticate and link your CardConnect account.

6. Once connected, click on Save.

7. Finally, set up these things, and you’re done:
   • Payment Type — With CardConnect, you can sell products, collect user-defined amounts, and accept donations.
   • Currency — CardConnect supports only USD.
   • Add Captcha  — This is required for the integration. Add and select a captcha from this Dropdown menu.
   • Credit Card Label Text  — Enter a custom label for the Credit Card section in the payment field, or keep it default.

Testing CardConnect Integration

For the Legacy integration, enable the Sandbox option under Additional Gateway Settings to test your CardConnect setup in a secure testing environment. If you’re using Reusable Payment Connections, you’ll need to enter sandbox credentials to proceed. To obtain these credentials, please contact CardConnect support directly.

You can use the following details to submit a test payment:

Looking for more info? Check out these helpful guides for more details:

• Setting Up Your First Order Form
• How to Add Options to Payment Forms
• How to Add a Coupon Code to Payment Forms
• How to Add Tax to Your Payment Form
• How to Add Shipping Cost to Payment Forms
• How to Generate an Invoice for Your Payment Form
• How to Enable and Manage Product Stocks in Payment Fields