How To Integrate CyberSource With Commerce Payments

In today’s changing digital world, everyone needs a robust solution to provide customer-friendly payment experiences to automate fraud protection, including simple technical integrations and 24/7 support. Integration between Commerce Cloud and Cybersource payment system help in effective payment processing and enable developers to work with all CyberSource components and various Commerce Cloud storefronts.

In this blog, you will learn how to use CyberSource as your commerce payment in the checkout process. Also, we will be configuring Cloud Solution Provider (CSP) and Cross-Origin Resource Sharing (CORS) during the process. And when it comes to the integration process, you need access to flows, named credentials, Lightning components, and Apex classes. So let’s first get started with the introduction of CyberSource.

What Is CyberSource?

CyberSource is a payment gateway solution that empowers merchants to accept payments across multiple sales channels worldwide safely. It supports popular payment methods across channels and grows revenue, with support for payment acceptance. The key features of Cybersource are Transaction Management, Device Management, Report Generation, Key Management for the admin/merchant.

To get started with CyberSource integration with Commerce Payments, we will be assuming that you have a base store and customer community setup.

Steps To Setup CyberSource Sandbox Account

• Create Sandbox Account

Step 1: Go to the Cybersource signup page.

Step 2: Enter the merchant Id as some alphanumeric value. Something you can remember easily ( like Robin123) and fill the other required fields.

Step 3: Tick the checkbox for terms and conditions and click “Create Account.”

Step 4: You will receive a similar image as shown below. Click on the “here” link for the merchant-level user.

Step 5: Enter the Organization id and contact email received in the mail for the merchant-level user and click “Submit.”

Step 6: Enter First Name, the Last Name, and User Name. Then, click on “Next Step.”

Step 7: Enter a password meeting the requirements and click on “Create User.”

Step 8: If the password is accepted, then the below screen appears. Next, click on “Go to login screen” and enter login.

•  Setup API Keys

Step 1: Now that you have successfully created your account, let’s generate API keys that Salesforce will use to authenticate itself.

Step 2: Click on Payment Configuration from the left panel and click on Key Management.

Step 3: Click on Generate Key.

Step 4: Select “Rest – Shared Secret” and click on “Generate Key.”

Step 5: You will see a key generated on your screen. This is your “secret key” and should be kept securely. Yow should copy the key or download it as this will be required for authentication from Salesforce.

Step 6: Now go to key management again, and you should see this key generated over there. If the key does not show up, try changing the filter from “Transaction processing” to “API keys.” Click on the key.

Step 7: The value after “Key Detail” is your “key id.” This key will also be required while authentication from Salesforce, so it’s better to save it along with your secret key.

Step 8: Now, you have successfully configured your CyberSource sandbox to receive payments.

Lightning Component:

Now, let’s move on to the Salesforce integration part. Below is the link to my GitHub repository, where you will find all the required components and apex classes to set up the Credit Card form.

Repository Link: GitHub

You need to deploy the data in the following sequence:

1. MockResponseGenerator
2. CybersourceUtility
3. CybersourceUtilityTest
4. CybersourceAdapter
5. CybersourceAdapterTest
6. CreditCardFormController
7. CreditCardFormControllerTest
8. CreditCardFormCmp  (Lightning Component)

NOTE: Make sure to deploy the component with API version 39.0 or earlier.

Open the CybersourceUtility apex class.

• Now replace “test@123” with your merchant Id.
• Replace ‘12345’ with your key id obtained in step 7 of “Setup API Keys.”
• Next, replace ‘212412’ with your secret key obtained in step 5 of “Setup API Keys.”
• Next, replace the ‘communityURLhere’ with your community URL. For example, “https://example.ap24.force.com”

We will need a Payment Gateway and Payment Gateway Provider. The payment gateway requires a named credential for authentication. 

Named Credential:

Now create a named credential by following steps:

Step 1: First, go to set up in your Salesforce org and search for named credentials.

Step 2: Click on “New Named Credential”

Step 3: Enter the following details:

1. Label: Cybersource
2. Name: Cybersource
3. URL: https://apitest.cybersource.com
4. Identity Type: Named Principal
5. Authentication Protocol: Password Authentication
6. Username: you merchant Id
7. Password: your CyberSource password
8. Set “Generate Authorization Header”  to false.
9. Set “Allow Merge Fields in HTTP Header”  to true.

Step 4: Click Save.

Add CSP (Content Security Policy):

Now we need to add “https://flex.cybersource.com” to CSP in Salesforce.

Step 1: Go to set up in your Salesforce org and search for CSP.

Step 2: Open CSP Trusted Sites and click on “New Trusted Site.”

Step 3: Enter the following details:

1. Trusted Site Name: Cybersource
2. Trusted Site URL: https://flex.cybersource.com
3. Active: true
4. Context: All
5. Check all checkboxes from the CSP Directives section.

Step 4: Click Save.

We also need to add this URL to the customer community. Below are the steps:

1. Go to setup and search for Digital Experiences.
2. Then, click on All Sites and click on the builder for your community.

3. Click on the Gear Symbol and go to Security and Privacy section. Make Sure that the CSP security level is set to “Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts.

4. Click on Add trusted site and enter the following information
   1. Name: Cybersource
   2. URL: https://flex.cybersource.com
   3. Active: true

5. Click “Add Site.”

Now go to your developer console and Click on “Query Editor” on the bottom panel. Enter the following query and hit “Execute.”

SELECT Id, DeveloperName, Language, MasterLabel,  ApexAdapterId,  IdempotencySupported FROM PaymentGatewayProvider

Now click on “Insert Row” and enter the following information in the cells by double-clicking on them:

1. DeveloperName: Cybersource
2. Language: en_US
3. MasterLabel: Cybersource
4. ApexAdapterId: Id of “CybersourceAdapter” class that you deployed earlier
5. IdempotencySupported: Yes

Now click on save.

Now you will see that the Id field in the row is populated on its own. Copy this Id as this will be used in the next step.

Now open the “Query Editor” again and paste the following query:

SELECT Id, PaymentGatewayName, PaymentGatewayProviderId, MerchantCredentialId, Status, Comments FROM PaymentGateway

Follow the previous steps and create a record with the following information:

1. PaymentGatewayName: CybersourceAdapter
2. PaymentGatewayProviderId: Id of the “PaymentGatewayProvider.obj” created in the previous step.
3. MerchantCredentialId: Id of the “Cybersource” named credential created earlier.
4. Status: Active

Click on save rows to save the payment gateway.

At this point, we have configured most of the things. The one thing left is to add our component to the community site.

Add Component to Checkout Flow

Below are the steps to add the component to the checkout flow:

1. First, go to setup and search for flows.
2. Open flow named “Subflow – Payment and Billing Address” or your cloned version of this flow.
3. Open the “paymentMethodScreen” Screen and drag the “CreditCardCmp” component to the screen.

4. Now enter the following details in the options for this Component:
   1. API Name: CreditCardPayment
   2. Cart ID: {!cartId}
   3. Order ID: {!orderId}
   4. Go to Advanced and check “Manually assign variables” to true.
   5. Selected Address ID: {!contactPointAddressId}

5. Click “Done.”
6. Now remove the following elements:
   1.  Which payment type is selected
   2. Assign PO to value
   3. Assign PO to null 
7. Connect the elements as shown in the below image:

8. If you are using a cloned version of “Subflow – Payment and Billing Address,” then just save this flow as the new version, and you are done 😉

9. Others can click on “Save As,” Enter a flow label and click on save.

• Add this Subflow to the main checkout flow:

Step 1: We are almost over with the process. We just need to add this Subflow to our main checkout flow.

Step 2: payment gateway and payment gateway provider. Go to setup and open flows.

Step 3: Open your cloned version of the main checkout flow.

Step 4: Drag a subflow element  and enter the following information:

1. Label: Payment and Billing Address
2. cartId: {!cartId}
3. currentState: {!mainCheckoutSession.State}
4. nextState: Activate Order
5. orderId: {!mainCheckoutSession.OrderId}

2. Now click save and replace the original Subflow element “Payment and Billing Address” with your version.

3. Maker Sure to attach “Main Decision Hub” to “Payment and Billing Address” for the criteria of “Payment And Billing Address” and attach the “Payment and Billing Address” Subflow element to Assignment element “loop.”

4. Your flow should look similar to the one shown in the below image.

5. Save the flow and activate it.

Now, place an order, and the credit card form will appear as a payment method. Enter fake card details from any site making sure that the card number is 16 digits only. This form can detect expired and invalid cards. However, it will accept card details from any fake card detail generator site.

Click on the “Submit Payment” button. Be patient while the transaction is being processed. After a successful transaction, you will be able to see your order details on the next screen.

Now let’s verify the transaction.

1. Log into Cybersource
2. Click on “Transaction Management” and select “Transactions.”
3. Your transaction should look like this.

To view detailed information about the transaction, click on the Request ID for that transaction.

Integrating CyberSource With Commerce Payments is a one-stop solution that can help you boost conversion and grow across new markets and improve your user experience. 

Are you looking to hire a certified Salesforce Integration Partner that can help you integrate your existing CRM system with other third-party applications? Being one of the best Salesforce integration services provider companies, Cloud Analogy delivers end-to-end solutions that incorporate multiple backend systems and applications and ensure maximum business benefits and boost productivity.