Take Payment Component

Chargent’s Take Payment Lightning Web Component allows your customers to safely and securely make payments from your Digital Experience community pages. This saves your billing and sales teams time, allows your customers to keep track of upcoming payments, and provides the option to save and reuse payment methods.

Add the Take Payment component to your Salesforce community site to quickly and easily accept payments from authenticated community users.

This page provides step-by-step instructions for implementing the out-of-the-box Take Payment component for your authenticated community users. For additional customization, see the following guides:

• To allow guest users to make payments in your Salesforce Experience Cloud site, see Community Payments for Guest Users.
• To create a custom payment process in your community, see Community Payments Using Flow.

Note: To allow authenticated community users to access and make payments via your community site, they will require Experience Cloud User Licenses.

Before You Begin #

The following instructions assume you have installed and configured the latest version of Chargent in Salesforce and set up your Salesforce Experience Cloud / Community site.

Assigning Licenses and Permissions

• In a production environment, all Chargent users, whether internal or external, must be assigned a Chargent license, including your community users.
• Assign the “View Setup and Configuration” and “Customize Application” system permissions and “Chargent Admin User” Permission Set Group to your Chargent administrators.
• Assign the “Chargent Community User” Permission Set Group to all community users who require access to the Take Payments component.

Adding Lookup Fields

• Add the following fields to your Digital Experience page:
  • A lookup field to the Chargent Order object
  • A currency field to reflect the payment amount

Activating Payment Methods

One of the Take Payment component’s superpowers is that it allows your customers to store and reuse their payment details. This option is only available if you have enabled the Payment Methods feature, which may already be activated in your org. For more information, see Setting Up Payment Methods.

Setting Up The Take Payment Component #

To set this up, edit your Digital Experience community and add the component to the desired page.

1. Click the gear icon and choose Setup, enter Sites in the Quick Find box, and select All Sites within Digital Experiences.
2. Click Builder next to your desired community.
3. Click Home and choose the page on which you want to display the Take Payment component. For example, you could choose Chargent Order Detail from within Chargent Order.
4. Drag the Chargent Take Payment component from the components icon on the left sidebar to an open section on your page.

5. Configure the following options:

Payment Form Title	Provide a title for the payment component that distinguishes it from others. For example, “Pay Invoice” or “Donate.” This field is required.
Include Email Address Field	Select if you want the form to capture the payee’s email address.
Include Country Field	Select if you want the form to capture the billing country
Gateway ID	Enter the gateway record ID. You can find the record ID by visiting the Gateways record and copying the value from your web browser’s URL. This field is required.
Charge Amount Field API Name	If you want the amount populated from a field, enter the API name of that field. For example, if you use Charge Amount on Chargent Orders, the API name is ChargentOrders__Charge_Amount__c. This field is required.
Billing Contact Field API Name	Enter the API name for the contact lookup field of the payee. If provided, the billing address fields will be available by default for the payee to change. If left blank, the payee will be prompted to enter these billing fields manually.
Chargent Object Lookup Field API Name	Enter the API name of the Chargent Order lookup field on the page where the Take Payment component is located. If left blank, Take Payment transactions created from a Chargent Order record will be related to that record. Take Payment transactions created from any other object will create a new Chargent Order record.
Record ID	This references the Salesforce identifier for the Chargent Order. Most often, the correct entry for this field is {!recordId}. This field is not noted as required but must be populated for the Take Payment component to function.
Account Number/IBAN	Enter the label you want to use for the bank account number.
Routing Number/BSB	Enter the label you want to use for the routing number or Bank State Branch.
Show “Name on Account” field for bank account payments?	Select this option to require the name on the bank account when using a bank account number instead of a credit card number.
Include “Save for future use” checkbox?	Select this option to allow authenticated users to securely store their payment method details so that Chargent displays them for selection on future purchases from your site. For more information, see Understanding the “Save for future use” Checkbox.
Hide CVV Field?	Select this option to remove the option for your users to add their credit card’s CVV number.

6. Click Preview to review your work.
7. Click Publish to make this change available to community members.

Using the Take Payment Component #

After you’ve set up the Take Payment component, authenticated community users can sign into your Digital Experience community site and view the page where you put the Take Payment component. Then, they’ll have the following options:

• Create a new payment method
• Use an existing payment method
• Remove a payment method

Creating A New Payment Method

When your authenticated community user clicks New, they will be prompted to enter their billing information. If you’ve made the Save for future use checkbox available (in the sample below), your authenticated community users can save the payment method and select it for future transactions. For more information, see Understanding the Save for future use Checkbox.

Using A Saved Payment Method

If an authenticated community user has saved any payment methods, they will be able to use them to make their payment. 

1. Click Pay to send a payment to your gateway using the selected payment method. 

2. If the user has more than one payment method stored, they can click Change to choose their preferred payment method.

3. Click Select to choose the payment method.
4. Click Pay to complete the payment.

Removing A Payment Method

A payment method is only visible to your authenticated community user when they own the record in Salesforce. When your user clicks Remove, the payment method is not deleted, but it is no longer owned by the community user and is no longer visible to them in the Take Payment component.

Note: Chargent Payment Method records can only be deleted by internal users with ‘Chargent Admin User’ permissions. This protects your payment audit trail by preserving a historical record of payment methods. For more information about Chargent’s permissions, visit Assigning Chargent Permissions.

Understanding the Save for future use Checkbox

This checkbox is only available after Payment Methods is set up in your org. When customers enter new payment details using the Take Payment component, a payment method is created.  If an authenticated community user selects the Save for future use checkbox, that user becomes the owner of the payment method, making that payment method available to that user for future payments.

The ownership of the payment method record determines whether or not the authenticated community user will see the payment method in the Take Payment component.

Changing Payment Method Ownership

If a community user accidentally removes a payment method, or if you want to expose an existing Payment Method to a community user for use in the Take Payment component, an internal Chargent user can navigate to the payment method record and change the record owner to the desired community user.

1. Navigate to the Chargent Payment Method record.
2. Under System Information, click the person icon to the right of Owner.
3. Select the down arrow and click Customer Portal Users.
4. Search for and select the desired community user.
5. Click Change Owner.

See Also

Setting Up Payment Methods
Community Payments Using Flow
Community Payments for Guest Users