Payment component

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

The drb2b_Payments component allows the shopper to enter their payment details. This section discusses options for customizing the component.

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.

Publish the overridePayments event

Use the following steps to to publish the overridePaymentsevent.

• 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;

• Publish the event to override payments. Include either enabledPaymentMethods or disabledPaymentMethods but not both.

publish(this.messageContext, dr_lms, { 
            “purpose”: “overridePayments”, //Required parameter 
            “payload” : { //payload parameter is optional  
                    “enabledPaymentMethods”[],
                     “disabledPaymentMethods”:[]
     });

Publish and 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         
       }
    }