Send Payment Request LWC

Most commonly, Chargent’s Payment Request feature is accessed from the Chargent Anywhere component, allowing you to send an email to your customers with a secure payment link. However, if your use case requires sending a payment request independent of the Chargent Anywhere component, such as from a Salesforce Screen Flow, the Send Payment Request Lightning Web Component (LWC) is the tool for you. Keep reading to learn how to use the Send Payment Request LWC to send a payment request directly from a screen flow.

Note: This page refers to the Send Payment Request LWC, which allows you to send a Payment Request form independent of the Chargent Anywhere component. For information about setting up Payment Requests using Chargent Anywhere, see Setting Up Payment Request.

Prerequisites #

Before using the Send Payment Request LWC, ensure you’ve completed the following prerequisites:

1. Install and configure Chargent according to our Quick Start Guide.
2. Create a Payment Request Site.
3. Configure a Payment Request Template.

Creating a Payment Request Screen Flow #

The following instructions will guide you through adding the Payment Request LWC to a screen flow, allowing your users to send a payment request directly from the screen flow. This example provides a template that can be customized to meet your organization’s specific needs.

1. Click the gear icon and choose Setup.
2. In the Quick Find box, enter Flows.
3. Click New Flow.
4. Select ‘Start From Scratch’ and click Next.
5. Select ‘Screen Flow’ and click Create.

6. Click + directly below the Screen Flow Start.
7. Click Screen.

8. In the ‘Components’ sidebar on the left, click Chargent Send Payment Request.

9. Populate the API Name field in the righthand sidebar. Choose a unique name, such as “Payment_Request_LWC”.
10. All other configuration fields are optional.

Configuration Field Name	Description
Chargent Order Id	Enter the ID of the Chargent Order you’d like to relate the Payment Request to.
Contact Id	Enter the ID of a Contact to email the Payment Request. Please note that the contact must have an email address populated.
Email	Enter the email address to which you’d like to send the Payment Request.
Gateway Id	Enter the ID of the gateway record you’d like to use for the Payment Request.
Payment Request Template	Enter the API Name of the Payment Request Template you’d like to use for the Payment Request.

We recommend populating the Chargent Order Id and Gateway Id fields based on your custom flow logic. If the Chargent Order Id, Gateway Id, or Payment Request Template fields are not populated, a selector will be displayed in the screen flow, allowing the user to choose for themselves. To learn how to find a record ID, see Locate the Unique ID of a Record in Salesforce.

11. Click the Header section and add a custom label, such as “Payment Request Screen”. The API Name will automatically populate.

12. Click Done.
13. Click Save in the top right corner of the screen.
14. Populate the Flow Label, for example: “Payment Request Screen Flow”. The Flow API Name will automatically populate.
15. Click Save.
16. Click Activate in the top right corner of the screen.

Great job! You’ve created and activated your screen flow, and you’re ready to add it to a Salesforce record page.

Adding the Screen Flow to a Record Page #

While you can add your newly created screen flow to any page, this example provides instructions on adding the flow to a Chargent Order record page.

1. Navigate to a record of the object you wish to add your screen flow to. In this case, we’ll start from a Chargent Order record.
2. Click the gear icon and choose Edit Page.
3. From the ‘Components’ sidebar on the left, drag the Flow component onto the page.

4. On the right sidebar, click the Flow dropdown and select your Payment Request screen flow.

5. In the top right, click Save. 
6. If prompted, Activate the page.

Congratulations! You’ve successfully added your screen flow to the Chargent Order record page. When you navigate to a Chargent Order record, you will see the component ready to deploy to your users.

Note: The Charge Amount will be equal to the Charge Amount field on the related Chargent Order.

Required Fields #

As mentioned earlier, the available fields can be set automatically based on your flow’s design, but if you leave them blank, your users will have the option to populate them directly within the flow. The following fields are mandatory to send a payment request using the Send Payment Request LWC:

• Gateway Id: This field can be defined when configuring the component in the screen flow. If not defined in the screen flow configuration phase, a selector will be displayed in the UI only if the selected Chargent Order does not have a defined Gateway.
• Chargent Order Id: This field can be defined when configuring the component in the screen flow or selected using the component’s UI.
• Email: Populate either the Recipient Email Address or Contact. If no email address or contact is chosen, the user will receive an error message stating, “You must enter either a contact email or search a contact to continue.”
• Payment Request Template: This field can be defined when configuring the component in the screen flow or selected using the component’s UI. If no template is selected, the user will receive an error message stating, “You need to configure Payment Request first.”

See Also

Setting Up Payment Request
Automating Chargent With Flow
Troubleshooting Automation and Validation Rules