Payments component

Learn how to use the Payments component for various use cases.

Use the drb2b_payments component to display Drop in and collect payment information from the shopper. You can configure this component in the flow.

You can publish an event to show or hide the Payments component and to reload the component. Refer to the Publish the Payment component events section below for details on how to publish the event to enable and disable specific payment methods.

Enable or disable specific payment methods

At times, you may need to let shoppers choose from specific payment methods based on their business requirements, such as providing payment methods based on the type of products in their cart. You do this by using the Payments component's Enable override payments designer attribute along with publishing an event which specifies the payment methods that should be displayed. This ability allows you to set the components attributes dynamically during page loading.

By default, the Enable override payments attribute is set to False and the drb2b_ payments component automatically loads on page load. If the Enable override payments designer attribute is set to True, the drb2b_payments component does not automatically load on page load. Instead, you can control the methods that are loaded by firing an event as described below. Drop-in Checkout then gets loaded once this event is received.

You publish the event and pass the values (payment methods) that you enabled or disabled based on your business requirements. While publishing the event, you must pass the purpose and payload as shown in this example payload:

{
“purpose”: “overridePayments”, //Required parameter
“payload” : { //payload parameter is optional 
        “enabledPaymentMethods”:["creditCard","googlePay"], // contains list of methods that needs to enable
        “disabledPaymentMethods”:["creditCard","googlePay"]// contains list of methods that needs to disable
}

Note: You can send either enabledPaymentMethods or disabledPaymentMethods in the payload attribute for this event, but not both. If you send a payload that contains both, theenablePaymentMethodparameter is used and disablePaymentMethodsis ignored.

Subscribe to the Fire Zero Dollar event

You can also use the Payment component to place zero-dollar orders without a payment source. By default the designer attribute Fire Zero Dollar Event is set to false. With this setting, when an order is zero-dollars, the connector will automatically move the shopper to the next screen in the flow without attaching a payment source. Depending on your flow, you may wish to have a greater control over the screen flow. In this case, you can set the attribute Fire Zero Dollar Event to true and subscribe to an event that you can use to control the flow. When this event is published, the drb2b_dropIn component will be hidden, but the shopper will not be redirected to the next screen in the flow.

Use the following steps to subscribe to an event published by connector when “Fire Zero Dollar Event” is set to True:

• Import the digitalriverv3__ DigitalRiverMessageChannel __c message channel and message service into a custom Javascript file.

import {subscribe, MessageContext, publish} from "lightning/messageService";
import dr_lms from "@salesforce/messageChannel/digitalriverv3__DigitalRiverMessageChannel__c";

• Declare the message context variable.

@wire(MessageContext) messageContext;

• Subscribe to the event.

connectedCallback() {
        this.subscribeToMessageChannel();
    }

subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(this.messageContext, dr_lms, (message) => this.handleMessage(message));
        }
    }

handleMessage(message) {
       if(message.payload == ‘fireZeroDollarEvent’){
          //Implemented logic here         
       }
    }

Publish the Payment component events

Complete the following tasks to publish various event types. The event purpose and payload will vary depending on the use case.

Import DigitalRiverMessageChannel__c message channel and message service into a custom JavaScript file as shown below.

Import example

import dr_lms from "@salesforce/messageChannel/digitalriverv3__DigitalRiverMessageChannel__c";

import {publish, MessageContext } from "lightning/messageService";

Declare the message context variable as shown below.

Declare variable example

@wire(MessageContext) messageContext;

Publish the event.

Event publishing example

publish(this.messageContext, dr_lms, { 
                    purpose: '<purpose>',           
                    payload: '<payload>'            
                });

Refer to the following table for more information on the Payments component events.

Event purpose	Event payload example	Description
toggleShowPaymentComponent	{"isShow":true}	Publish this event to show {"isShow":true} or hide {"isShow":false} the Payments component.
reloadPaymentComponent	n/a	Publish this event to reload the Payments component.
overridePayments	Example 1: {"enabledPaymentMethods":["creditCard","googlePay"]} Example 2: {"disabledPaymentMethods":["creditCard","googlePay"]}	Publish this event to override the payment methods shown for a specific transaction. This event can be fired using both on page load – using the Designer Attributes of the drb2b_payments component in the flow and by firing an event outside the connector. To use this override, first ensure that the designer attribute “Enable override payments” on the drb2b_payments component is set to true. See details in the Enable or disable specific payment methods topic.