Pushing the envelope of Drupal 9 and CiviCRM integration is an integral part of the team at Skvare and a key component in problem-solving for clients. With an opportunity to find a way to register multiple people to multiple events at the same time, with shopping cart functionality, our experts published the Commerce CiviCRM Event Registration Drupal 9 module combining a host of new integrations with CiviCRM.

Drupal Commerce is a versatile suite of modules that is very configurable and offers a high-quality user experience. CiviCRM Entity provides deep integration of CiviCRM with Drupal. Combining the two provides a new baseline for custom shopping cart experiences for CiviEvent. It is meant as an example or demonstration of what is possible with custom features being added for each client's unique specifications. It is not the end, but the beginning of CiviCRM and Commerce integration.

The Commerce CiviCRM Event Registration provides a Commerce Product type "CiviCRM Event". It includes a new checkout pane for the user to enter in participant details, as well as checkout review and completion messages. On checkout, corresponding CiviCRM contributions and participant records are created. In this way, the module can leverage Drupal Commerce's powerful user experience, with CiviCRM's data structure and reporting capabilities.

The module also provides almost all configurations necessary to start selling event registrations immediately, with only a few manual steps necessary.

Installation and Setup

First, install the module and its dependencies per Drupal 9 standards with composer:

composer require drupal/commerce
composer require drupal/commerce_civicrm_event_registration

The Commerce suite uses about 20 modules, so it is recommended to install them a few at a time. Once Commerce is installed, install Commerce CiviCRM Event Registration. If using Drush:

drush en commerce_civicrm_event_registration

Commerce Basic Store Setup

The next few steps are unnecessary for systems with an existing Commerce store setup.

To set up a commerce store, go to /store/add/online . Enter default information including store name, email, address, and default currency.

At least one payment gateway must be enabled to complete payment. Go to /admin/commerce/config/payment-gateways and click the "Add payment gateway" button. A range of payment processors are available as contributed modules for Drupal commerce, but it comes with a "Manual" payment gateway out of the box. Create one, call it "Check", and put in the payment instructions.

Commerce CiviCRM Event Registration Checkout Flow

Commerce CiviCRM Event Registration comes with a Commerce Checkout Flow, at /admin/commerce/config/checkout-flows/manage/civicrm_event_checkout_flow

Notice this checkout flow includes a "Registration Information" checkout page and checkout pane.

Configure the Order Type

Out of the box, Commerce configures one order type, called "Default". Go to /admin/commerce/config/order-types/default/edit

Head there, and configure it to use the new checkout flow

On module install, an Entity Reference field "CiviCRM Contribution" (field_civicrm_contribution) will be added to the Default order type.  If you do not have the Default order type or want to use this module's features with another order type, simply configure it to use the new checkout flow and create the entity reference field manually. The field should reference entities of type "CiviCRM Contribution", capability for this is provided by the CiviCRM Entity module.

You should be ready to add CiviCRM Event products.

CiviCRM Event Products

The module installs a "CiviCRM Event" product type and product variation. Multiple product variations can be configured for the same product, each having different attributes and possibly different prices.

Before creating the first product, ensure an event was created in CiviCRM. To create an event in CiviCRM, go to /civicrm/event/add?action=add&reset=1. It also is possible to create CiviCRM Events from the Product add/edit form with Inline Entity Form.

Once the event has been created in CiviCRM, create a matching Product in Drupal.

Go to /product/add and click the link for the "CiviCRM Event" product type.

Next, enter a title and description. Make sure to reference the CiviCRM event users will register for with this product. Out of the box, the "CiviCRM Event" reference field is an autocomplete widget. Start typing the name of the CiviEvent and select it. Enter the price, SKU, and title of the product variation in the "Product Information" fieldset.

After completing the information, click save, and a "Register now" button will be added to the product page. Users can set any value for the quantity field and this will be the number of people the user wants to register for the event.

Cart and Checkout

After the user chooses their quantity and clicks "Register Now", the product will be added to their cart. To see the cart, go to /cart

The user can update the number of people to register by updating the quantity field and clicking the "Update cart" button. When ready, click the "Checkout" button.

As a logged-in user, the next step will be the new commerce checkout pane, "Registration Information". The first registrant will commonly be the logged-in user, so a checkbox is provided, and the logged-in user's CiviCRM Contact will receive the participant record. Optionally uncheck that box to register another person for the event, by entering a first name, last name, and email. On submit of the checkout pane, the module will try to match these values for existing contacts and, if none are found, will create new CiviCRM Contacts. On submission, a "pending" contribution record and participant record(s) are created with the status "Pending from incomplete transaction"

Complete the checkout process by entering the name and billing information for the user purchasing the event registrations. After that, the user will see a review pane, which will include details about the registration. This page summary can be modified via Drupal theme templates.

If the payment gateway is "Check" as described earlier, then the CiviCRM contribution and participant records will have status updated to "Pending - pay later"

When the check is received, the Commerce payment transaction is updated and the order is paid in full, then the module will automatically change the contribution status to "Completed" and the Participant statuses to "Registered". If payment was received in full at the time of checkout, then these statuses will already have been changed.

CiviCRM Records in the back end

The necessary CiviCRM records will have been created during the checkout and payment received processes, including Contribution, Participant, and ParticipantPayment records.

Summary

By creating a Commerce product for each CiviEvent, websites can provide a fully-featured cart and checkout experience for event registrations. This example module is considered a baseline, and each facet can be customized to suit specific client needs. Look out for future articles describing some more advanced possibilities that we implement for our clients including:

• Events with multiple product variations, to provide complex pricing options
• CiviCRM profiles for registration information checkout pane
• Advanced de-duplication of registrants
• Max participants and waitlists
• Creation of CiviEvents on Commerce product create
• Showing CiviEvent properties on the product page
• Innovative product, cart, and checkout designs
• Usage of some of the hundreds of modules that enhance Drupal commerce's capabilities.

With Commerce/CiviCRM event registration functionality worked out, be on the lookout for similar functionality for membership signup and renewals, and contribution functionality, so that all Core CiviCRM payments can be done with one cart and checkout process.

If your organization needs custom cart and checkout experiences, Contact Skvare now to talk to a Drupal Commerce / CiviCRM integration consultant.