Home / Integrations / Shopping Carts / DrupalCommerce


The following are instructions to show you how to integrate Click & Pledge Payment gateway in Drupal Commerce.

Integration between Click & Pledge's Payment System with Drupal Commerce

Download the Click & Pledge integration module from GitHub: https://github.com/ClickandPledge/commerce_cnp

Drupal Commerce is used to build eCommerce websites and applications of all sizes. Drupal Commerce is a fully open source: there is no "premium" version, meaning that you can take full advantage of the power of Drupal Commerce right now.
  • Developers who like to handle Drupal installation from scratch or who want to extend an existing Drupal installation with Drupal Commerce features can download Drupal Commerce from its project page on drupal.org and install/configure the modules directly.
Core Features
  • Create product types with custom attributes
  • Dynamic product displays
  • Order management, line item
  • Payment method API, allowing many different payment gateways
  • Tax calculation / VAT support
  • Discount pricing rules
  • Deep integration with systems like D8's Fields, Views, Rules and Entity API.

Some Useful Links:

Drupal Commerce currently depends on Drupal 8 (>= 8.6.2) with the latest releases of a few modules: Ctools 1.2, Views 3.5, Entity API 1.0-rc3, Rules 2.2, and Address field 1.0-beta3.

Note: Here onwards we are assuming that you are running on Drupal 8(>= 8.6.2)

Installing Drupal Commerce
  1. Install From Scratch: You can do it from scratch by installing Drupal 8 or 9 and then enabling the Commerce modules and their dependencies. This process requires additional configuration of products and product displays before you can start selling through your site.
Install From Scratch:
  1. Your first step will be to perform a standard installation of Drupal 8 or 9. (For more details how to install Drupal please refer http://drupal.org/documentation/install
  2. Install Commerce modules:
    1. Address Field (http://drupal.org/project/addressfield)
    2. Chaos tool suite(http://drupal.org/project/ctools)
    3. Entity API (http://drupal.org/project/entity)
    4. Rules 2 (http://drupal.org/project/rules)
    5. Views 3 (http://drupal.org/project/views)
  3. You should download the latest version of Drupal Commerce (http://drupal.org/project/commerce)
Note: Below are additional Modules you may use for better operation
Once the modules have been enabled, you're ready to start configuring the Commerce components for your particular business needs.

Admin Login:

Enter the correct Drupal Modules username and password to log in.

Once login, click Commerce to manage your C&P payments.


How to add Payment Processor

1. Download the ClickandPledge module from https://github.com/ClickandPledge/commerce_cnp
2. Click on Modules Menu and then click on ‘Install new module’ link (Extend->List)


3. Install ‘ClickandPledge’ from the Drupal site by searching in modules or by uploading the module from your local computer.


4. Once installed, enter the email address associated to Click & Pledge and click ‘Verify’.


5. A verification code will be sent to your email address. Copy and paste the same and click ‘Log In’.

6. After successfully logged in, go to Commerce > Configuration > Payment > Payment gateways > Add payment gateway (Click it).

7. Enter the name, select the plugin ‘CnPmoney Redirect’, select the mode based on the need and click ‘Save’. This will help you to see the Click & Pledge payment gateway in the Checkout page.

How to configure Click & Pledge Payment Processor

To configure Click & Pledge Payment Processor, go to Commerce and select ‘CnP Payment Settings’.


General Settings

Status: Enable the status to see the C&P payment gateway in the site.

Title & Description: Give the title for the Click & Pledge Payment Gateway and add needed description.

C&P Account ID: Based on the Account ID selected, the settings which are set in the CONNECT platform will be appear here.

CONNECT Campaign URL Alias: Transactions will post to this selected Campaign. It can be added to the form so that the transacted amount will be added to the selected campaign. By entering the CONNECT Campaign URL Alias in the Form, the receipt assigned to the CONNECT Campaign will replace the generic receipt. The receipt which is assigned to this campaign will be sent to the recipient. For additional information on Receipts, click this link.  

To know the CONNECT Campaign URL Alias, login to CONNECT platform (https://login.connect.clickandpledge.com) > Launcher > Fundraising > Campaigns > Select the desired campaign > Campaign Details > Campaign Settings > Basic Information > Campaign Alias. 

Mode: Mode may be set either to Test or Production. Test mode is used to test the transactions. No amount will be deducted from the payment. Production mode is nothing but live payment form wherein the given amount will be deducted from the selected payment type.

Payment Methods: The CONNECT Payment settings will be replicated here. Due to limitations with the Drupal Commerce payment API, only credit card payment is currently supported. To view the accepted credit cards, please login to CONNECT and click Launcher > Settings > Accepted Cards.


Receipt Settings

Enable Send Receipt to Patron to send the receipt to the patron. Receipt Header and Terms & Conditions can be edited upon need.


Recurring Settings

Recurring Label: Enter the name of the recurring settings which will appear in the external page.

Payment Options Label: The name entered here will be displayed in the external page. Enable or disable the one-time only & recurring options as per the need.

NOTE: Recurring options will be available only when the check-box for recurring is enabled.

Default Payment Option: If both one-time only & recurring options are active then this option will be available. Select one as the default payment options.

Recurring Type Label: The name entered here will be displayed in the external page. Enable the check-boxes for installments & subscription.

Default Recurring type: Select the default recurring type. This option will be available only when both installments and subscription is enabled.

Periodicity Label: The name entered here will be displayed in the external page. Select the desired periodicities so that they will appear in the external page.

Number of Payments Label: Enter the name of the field so that it will appear in the external page.

Indefinite only: If this option is selected then 998 times for installments and 999 times for subscription, the recurring option will be continued.

Open Field only: If this option is selected, “Default number of payments” and “Maximum number of installments” can be given. The entries given here can be changed in the external page.

Indefinite + Open Field Only: If this option is selected, the default value will be 999 which can be changed accordingly in the external page.

Fixed Number – No Change allowed: If this option is selected, the number entered in this field remains constant.

After making all the changes click on the “Save Configuration” button.


How to Change User

We can change the user with CONNECT platform through OAuth Connection. To do so, you need to have CONNECT Account. Click on ‘Change User’.


Enter the email address associated with your Click & Pledge account and click on Verify


Please check your email inbox for the email. Copy and Paste the code and click Log in. 



By default, Drupal Commerce allows zero payments (free orders) without asking for credit card information. If total payment is $0 then it will just ask billing information and confirms the order.  

If we want to allow credit card information along with billing information, then we need to do the following code level changes in Drupal commerce module. 

We need to work with the following two files with minimal code changes 

File 1: PaymentProcess.php 

Location:  project-root-folder\modules\commerce\modules\payment\src\Plugin\Commerce\CheckoutPane\PaymentProcess.php  

In this file, please find the function isVisible(). Replace isVisible() function with below modified function  


 File 2: PaymentInformation.php 


Location: project-root-folder\modules\commerce\modules\payment\src\Plugin\Commerce\CheckoutPane\PaymentInformation.php 

1. Please find the buildPaneForm() function. In this function, comment the below code shown:


/*if ($this->order->getTotalPrice()->isZero()) { 

                     // Free orders don't need payment, collect just the billing information. 

                    $pane_form['#title'] = $this->t('Billing information'); 

                   $pane_form = $this->buildBillingProfileForm($pane_form, $form_state); 

                   return $pane_form; 


2. Please find function validatePaneForm(). In this function, comment the below code shown:


/*if ($this->order->getTotalPrice()->isZero()) { 



3. Please find another function submitPaneForm(). In this function, comment the below code shown:


/*if ($this->order->getTotalPrice()->isZero()) { 




The above changes will allow you to accept $0 payments with credit card information also.  

 RSS of this page