Take Payment Component

Chargent’s Take Payment component is a Lightning web component that allows your customers to safely make payments from your Digital Experience / Community pages, or from a Flow. It can save your customer service team time in responding to calls and emails because your customers can securely log in, see what invoices are due, and make payments themselves.

To get started, add the Take Payment component to your Salesforce community site to accept payments from your authenticated community users.

Note: this component requires you to purchase community user licenses from Salesforce and AppFrontier to process their payments. It will not work for guest users.  

Before You Begin #

This assumes you have already installed and configured Chargent in Salesforce as well as your community site. Ensure you have completed the following:

• Install the most current version of Chargent. This automatically enables the take payment feature if you have Salesforce Platform edition or higher.
• Create and test at least one payment gateway record.
• Enable these permissions in your user profile: “View Setup and Configuration” and “Customize Application”.
• Set up your Salesforce Digital Experience / Community page.
• Configure your page so that there is room for the component.
• Add the following fields to your Digital Experience / Community page:
  • A lookup field to the Chargent Order object
  • A lookup field to the Contact object (recommended)
  • A currency field to reflect the payment amount

Chargent’s Take Payment component allows you to display an option for customers to store their payment method details for future use. This option is only available if you have enabled the Payment Methods feature.

Note: Your Chargent installation may not have Payment Methods enabled. Once enabled, it cannot be disabled. See Implementing Payment Methods for more details about enabling this feature.

Adding 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 you want to display the Take Payment component. For example, choose Chargent Order Detail from within Chargent Order.
4. Drag the Chargent Take Payment component from the components icon on the left sidebar and drop it in an open section in 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.”
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 15 or 18-character gateway record ID. You can find it on the Gateways object as part of the web browser URL.
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 are using Charge Amount on Chargent Orders, the API name is ChargentOrders__Charge_Amount__c. Leave this field blank to allow users to input an amount instead of mapping it from a field on the page or in the Flow.
Billing Contact 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 blank, the payee will be prompted to enter them manually.
Chargent Object Lookup Field API Name	Enter the API name of the Chargent Order lookup field on this page. Payments made on this page will be related to the Chargent Order. If this field is not populated, Chargent generates a new order record.
Record ID	This references the Salesforce identifier for the order. It should automatically default to {!recordId} and should not be changed.
Account Number/IBAN	Enter the label you want to use for their bank account number.
Routing Number/BSB	Enter the label you want to use for 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 bank account and routing numbers instead of credit card number.
Include “Save for future use” checkbox?	Select this option to allow customers to securely store their payment method details so that Chargent displays them for selection on future purchases from your site. Your authenticated community users can also store additional payment methods or remove existing payment methods. If this option is enabled, instruct your users to select existing payment methods from your Community page, click New to create new payment methods, or Remove to make any payment method unavailable.

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

See Also

Setting Up Payment Requests
Chargent Payment Console
Sending A Payment Request