# Payments component 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](#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 } ``` {% hint style="info" %} **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, the`enablePaymentMethod`parameter is used and `disablePaymentMethods`is ignored. {% endhint %} ## 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. {% code title="Import example" %} ``` import dr_lms from "@salesforce/messageChannel/digitalriverv3__DigitalRiverMessageChannel__c"; import {publish, MessageContext } from "lightning/messageService"; ``` {% endcode %} Declare the message context variable as shown below. {% code title="Declare variable example" %} ``` @wire(MessageContext) messageContext; ``` {% endcode %} Publish the event. {% code title="Event publishing example" %} ``` publish(this.messageContext, dr_lms, { purpose: '', payload: '' }); ``` {% endcode %} 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.

|