How to Integrate AEM Forms With Payment Gateways for a Seamless Checkout Experience

The checkout process is a critical juncture where consumer interest converts into revenue, making it imperative that businesses ensure this experience is as seamless as possible. With a smooth checkout experience, companies can enhance customer satisfaction and significantly reduce cart abandonment rates, directly impacting the bottom line.

At the heart of optimizing this process lies integrating efficient and reliable technology solutions such as Adobe Experience Manager (AEM) Forms.

AEM Forms play a pivotal role in eCommerce checkout by enabling businesses to create dynamic, personalized form experiences that streamline data capture and processing. This speeds up interactions, ensuring that customer data is handled securely, paving the way for a swift and hassle-free checkout process.

Building on the capabilities of AEM Forms and integrating them with payment gateways is crucial for optimizing the checkout process and improving efficiency. This integration facilitates seamless transactions by connecting AEM Forms, which collect and manage customer data, with the secure processing features of payment gateways.

However, while integrating AEM Forms with payment gateways, businesses often struggle with issues such as

– Ensuring AEM Forms and the chosen payment gateway seamlessly integrate without technical conflicts.
– Aligning data formats and structures between AEM Forms and the payment gateway to ensure accurate data transfer and processing.

In this blog post, we’ll explore the benefits and process of integrating AEM Forms into your eCommerce operations to transform the checkout experience, foster greater customer loyalty, and drive business success.

Benefits of Integrating AEM Forms With Payment Gateways

AEM Forms enable robust data integration and management, including binding forms to schemas or XDP forms. When combined with Razorpay’s payment processing, this enhances backend integration and data handling. It also enables businesses to measure form usage metrics and gain insights into user behavior, optimizing forms and improving the overall user experience, leading to higher conversion rates. Let’s explore them!

1. Simplified Payment Processing

Integrating AEM Forms with payment gateways simplifies payment processing by providing seamless integration, automated workflows, and end-to-end management capabilities. This integration streamlines the embedding of payment options within digital forms, reducing the need for manual intervention and ensuring a smooth transaction process for users. Automated workflows trigger payment processing upon form submission, minimizing errors and operational overhead. Lastly, the comprehensive management features enable businesses to centrally create, manage, and update forms complying with the latest standards and regulations.

2. Secure Transactions

AEM Forms enhance transaction security by incorporating robust security measures, fraud prevention mechanisms, and detailed audit trails. Advanced security features such as encryption and digital signatures protect sensitive payment information, ensuring all transactions meet industry compliance requirements. Integration with payment gateways leverages fraud detection and prevention tools, adding an extra layer of security to protect businesses and customers from fraudulent activities. Lastly, detailed audit trails and change histories for all transactions provide transparency, enabling discrepancies to be quickly identified and resolved, maintaining the integrity of the transaction process.

3. Improved Customer Experience

Integrating AEM Forms with payment gateways significantly improves customer experience through personalized communication, responsive design, and enhanced self-service capabilities. Personalized and interactive forms dynamically adapt to user inputs, making the payment process more intuitive and engaging. The responsive design ensures that forms work seamlessly across various devices and platforms, enabling customers to complete transactions effortlessly, whether on a desktop, tablet, or mobile device. Lastly, enhanced self-service options empower customers to complete transactions independently, access payment history, and receive personalized communications, leading to higher satisfaction and loyalty.

Steps to Integrate AEM Forms With Razorpay

This tutorial will take you through the steps for integrating Razorpay, a popular Indian payment gateway, with AEM Forms for seamless online payments.

Step 1: Setting Up Razorpay Account

• Firstly, sign up for a Razorpay account.

• In the Razorpay account, the application provides two modes

  – Test Mode (Testing purpose)
  – Live Mode (To accept real-time payments)

  For now, we’ll focus on Test Mode, which enables us to conduct tests without involving real money.

• Go to Account & Settings and under “Account and Product Settings” click the API keys option to generate the Razorpay API key and secret key.

Figure 1: Path Follow to Generate API Keys

Step 2: Create a Form in AEM Forms

• Log in to your AEM instance, navigate to AEM Forms, and click the “Forms and Documents” option.

Figure 2: Navigation Screen to Create Adaptive Forms

• Then, create a new adaptive form by selecting a template and entering the form details, or open an existing form that you wish to integrate with Razorpay.

• Next, add form fields for collecting payment-related information such as amount, name, email, etc.

Figure 3: Adaptive Form With Payment Details

Step 3: Add the Razorpay Integration Code

• First, create a rule editor attached to the “Pay” button on our adaptive form.

Figure 4: Open Rule Editor Option in Button Configuration

• This rule editor triggers an AJAX call to a servlet upon button click, where you have to specify the servlet URL path.

Figure 5: AJAX Call in Rule Editor

• Next, develop the servlet using Sling’s path, ensuring the URL corresponds to the AJAX call, and invoke the payment method in the service layer.

Figure 6: Servlet Invoked From Ajax Call

• Within the servlet, you can also utilize an AJAX call to interact with the Razorpay Order API, initiating a request to create a new order. Upon successful execution, the API will respond with an order_id.

Figure 7: Razorpay Order API call

• With the order_id received from the Razorpay Order API response, prepare the prefill data required for payment processing. This includes gathering details such as name, email, and card information from the adaptive form that the user configures.

Figure 8: Prefill Payment Related Details

• After this, you can make another call to invoke the Razorpay API, triggering the payment initiation process based on the prefill data prepared in the previous step.

Figure 9: Razorpay API Call to Initiate Payment Process

• To integrate the Razorpay payment process, copy the necessary code from the Razorpay Checkout JavaScript and implement it in the client library category. This code can be accessed, here.

Below are the steps to set the client library category in the form:

a. Navigate to the content settings of the form and click “Expand All Properties” to access the basic properties.

Figure 10: Open Properties of Form Container

b. Enter the category name in the “Client Library Category” field, that was set when creating the client library in CRXDE.

Figure 11: Basic Setting To Set Client Library Category

c. In CRXDE Lite, copy the Razorpay checkout code using this URL, and create a JavaScript file in the client library with the appropriate categories value.

Figure 12: Create File With Checkout URL Code

• In the project’s code repository, add a dependency entry for the Razorpay Library (com.razorpay version 1.4.5) to the main pom.xml file. Include the same dependency entry in the core module code without specifying the version.

– Entry for Main pom.xml:

com.razorpay
razorpay-java
1.4.5

– Entry for Core Module pom.xml:

com.razorpay
razorpay-java

Figure 13: Dependency Entry

• Finally, create an OSGi bundle from the Razorpay library JAR file and install it via the AEM console bundles interface.

Step 4: Test the Integration

• Test the integration by filling out the form and completing a payment transaction.

• Verify that the payment data is securely transmitted to Razorpay and the callback updates the form status accordingly.

Here are the potential challenges and their best possible solutions:

1. Issue: When configuring the payment integration, you might encounter an issue with authenticating the Razorpay account due to a missing credential dependency in the OSGi bundle. To address this, you can follow the below-outlined approach:

Solution: In the core pom.xml, include the package name of the problematic class within the configuration tag under the build plugin section. If the issue persists despite having the necessary dependencies, ensure the package name is correctly specified within the configuration tag to address the missing JAR problem.

You might also face an issue related to the Credentials class. To overcome this, you can include the package name “okhttp3.credentials” in the “import-package” section of your pom.xml file. Here’s an image to illustrate.

Figure 14: Enter Package Name in Import-Package to Resolve Dependency Issue

2. Issue: When you add a jar file into the console bundles, the below error message might pop-up.

Solution: To resolve this issue, you can create an OSGI bundle from the jar file. Follow these steps to create an OSGI bundle.

– Firstly, create an eclipse plugin project.

– Then, add an external jar file that you want to convert to OSGI.

– Then, define the project name and click the Finish button.

– Open manifest.mf file and under Runtime Tab add exported packages.

– Next, export the project as a deployable plugin.

– Lastly, install the OSGI bundle into console bundles.

Step 5: Outcome

1. Now, the user can access the adaptive form, fill in details, and click the Pay button.

2. After clicking the Pay button, Razorpay interface will open, asking the user to select the card option, then click the Pay Now button.

3. Here, the card details will get pre-filled through the adaptive form.

4. After initiating payment, the user will be redirected to the success page.

Enhancements and Best Practices to Consider

• Implement error handling and validation to ensure a smooth user experience.

• Secure sensitive data such as API keys and payment information using encryption and other security measures.

• Optimize the payment flow for mobile responsiveness and accessibility.

• Access code reference on integrating Razorpay with Grazitti Interactive’s codebase, here.

Wrapping Up

Integrating Razorpay payments with AEM Forms enables businesses to collect payments through online forms easily. By following the shared steps, you can set up a frictionless payment experience for users, securing transactions and improving their experience.

Here, an AEM digital partner can provide expert guidance and support, ensuring a smooth integration process and optimizing and securing the payment workflow to enhance customer satisfaction and operational efficiency.

Ready to Elevate Your Customer’s Checkout Experience With AEM Forms? Let’s Talk!