AppFrontier

Table of Contents

Chargent Documentation

Chargent for Salesforce Communities

Take Payments


Take Payment Configuration & User Guide

Why Take Payments in Communities?

There are many use-cases for this, but the obvious one relates to Customer Service. If you’re running a customer service department, and taking payments over the phone or by email, then implementing Chargent’s Take Payments feature can lower that volume. This means you can reduce staffing costs and free up time so your staff can focus on other tasks. Allowing self-service payments also provides flexibility to your customers as they no longer have to call or send an email in order to make the payment; they can simply log into their account and make the payment.

Furthermore, Chargent Take Payments expands the potential value of your Salesforce Community by unlocking other use-cases:

  • Turn your community into an ecommerce venue where you can sell goods, services, upgrades, etc.
  • Utility company customers can log in to pay bills, update payment methods, or pay for move-requests
  • Take payments during event sign-ups

This feature payment-enables any Salesforce.com Communities page in minutes.



Important Prerequisites

  • In order to setup Chargent Take Payments feature, you need to have your Salesforce Communities page already created. For setting up your Communities Page you should contact your Salesforce Account Representative.

  • Ensure you have enough space available for the Take Payments component.

  • The object associated with your Salesforce.com Communities page needs to include the following fields to work:

    • A lookup field to the Chargent Order object
    • A lookup field to a Contact object (recommended, but not required)
    • A Charge Amount field on the object you are going to be taking payments from

You will also want to ensure that the following are completed:

  • Chargent 5.81 Base or newer is installed. If you need to upgrade to a current version please do so from our PIM (Package Installation Manager) on our Installation Page
  • Chargent Take Payment feature has been activated for your Org (Chargent Platform license or above includes Communities licensing).
  • At least one payment Gateway record has been created and tested
  • Your user profile has “View Setup and Configuration” and “Customize Application” permissions enabled



Configure Chargent Take Payment

Step 1 - Add the Chargent Take Payment Component to your Communities Page

Enter your Org setup by clicking the [Gear] icon, then click [Setup]. This will open the Setup home.

Take Payments Setup

In the Quick Find search field, type “Communities,” then click “All Communities.”

Take Payments All Communities

Click the [Builder] link on the Community you wish to add Take Payments to.

At the top-left portion of the screen, click the down-arrow to reveal the list of available pages, then click the page on which you wish to configure the Take Payment component.

Take Payments Pages

Note: If you want to add the Take Payments feature to a different object than the Account (default), you can click Home, then New Page at the bottom of the list. Click the Object Page and select the object you want to use. Then select it from the Home menu.

new standard

At the top-left portion of the screen, click the [Components] icon (looks like a lightning bolt), and scroll to the bottom of the list until you see “Chargent Take Payment” under the ‘Custom Components section.

Take Payments Components Take Payments Components

Drag the Chargent Take Payment component from that list to the desired section of your page.

  • While the component is compact and should fit in most page sections, it is not advised to add the component to smaller, narrow sections like headers and footers.

  • Upon dragging the component to a Communities page, you may see an error stating that “Something went wrong.” This should resolve once you’ve configured the component as seen in the instructions in Step 2. Once configured, simply navigate back to the page on which you’ve configured the component and refresh your browser. This message should no longer be present and instead will display the Take Payments form.

    Take Payments Something Wrong




Step 2 - Configure the Chargent Take Payment Component

Now that you’ve added the component to your page, it’s time to configure it.

While still in the Builder, click the Chargent Take Payment component to bring up the configuration panel.

Take Payments

Complete the fields and options as follows:

  1. Payment Form Title
    • Type the desired title to display at the top of the component. Some examples:
      • “Make Payment” or “Pay Invoice” for utility or service contracts
      • “Checkout” for ecommerce sites
      • “Donate” or “Make Donation” for charities or non-profits

  2. Include Email Address Field
    • Check this box if you’d like the component to include a field for the Payee email address

  3. Include Country Field
    • Check this box if you’d like the component to include a field for the Billing Country

  4. Gateway ID
    • Enter the 15 or 18 character Gateway Record Id (go to Gateways, click on the Gateway you wish, and copy the record ID from the web browser URL).

    Take Payments


  5. Charge Amount Field API Name
    • Enter the API name of the currency field on this page to be used as the default charge amount

  6. Billing Contact Field API Name
    • Enter the API name of the Contact lookup field on this page
      • If provided, the billing address fields will be pre-populated with the billing address from the chosen Contact Record (the user may still change these fields even when pre-populated.
      • If not provided, the user will be required to enter the address manually

  7. Chargent Object Lookup Field API Name
    • Enter the API name of the Chargent Order lookup field on this page
      • Payments made on pages where this field is populated, will be made against that Chargent Order
      • Payments made on pages where this field is not populated will generate a new Chargent Order Record

  8. Record ID
    • This field defaults to {!recordId} and should not be edited

Once all the required fields are populated, you can re-select the page you are taking payments from and refresh. You see the form on the page and should now be able to publish the page.

To Publish, click the [Publish] button at the top-right of the page and follow the prompts to publish this page.

Take Payments Publish Preview

Setup is now complete! Navigate to the Communities page you’ve configured to test the Chargent Take Payment feature.



Using the Take Payment Feature

Once configured, the Chargent Take Payments Component appears on the Communities page you configured and allows your customers / users to quickly submit payments that are captured immediately within your Salesforce.com Org.

Before We Start

A couple of quick notes:

  • This component will abide by the rules and restrictions of the gateway record it is configured to use. This includes:

    • Payment methods allowed
    • Card types allowed
    • Is the CVV required

  • When making a payment via Bank Account, if your Communities users manually type into the “Account Number” or “Bank Account” fields, a second version of that field will appear and request confirmation of that entry. This is to prevent failed payments due to mis-typed accounts and bank numbers. Pasting into these fields will not require this confirmation.

  • This component will change in appearance (colors) based on the color or theme options set on the Communities page.

  • The “Charge Amount Field API Name” will not properly function if mapped to any field type other than Currency.


Using our Take Payment Component

Take Payments

  • Payment Method Selector: Select whether to submit payment via Card or Bank Account (ACH)
  • Billing Address: Enter the billing address for the card or bank account being used
    • This will auto-populate if the “Billing Contact Field API Name” is configured
    • This is editable regardless of whether the “Billing Contact Field API Name” is configured
  • Payment Info: Enter the card or bank account info being used for this payment
  • Pay Button: Click the pay button to submit the payment
    • This button will reflect the total amount being paid and is controlled via the “Charge Amount Field API Name” field of the component configuration.


Want to Payment-Enable More Pages?

Great! To add the same great Chargent Take Payment functionality to other pages, just follow this guide again. Chargent Take Payment can be added to multiple pages and is configurable on a per-page basis, adding flexibility and uniquely customized usage of Chargent Take Payment on each page in your Community.

Flow-Enabled Take Payment Component - User Guide 

Version 1.00
October 8th, 2021

Overview

Flow-enabled Take Payment Component allows you to create a curated experience for your customers. It allows you to create a flow, and use Chargent’s Take Payment Component on any page to help guide your users to the check out form in order to give them the experience you want them to have.

Prerequisites:

  • You are subscribed to Chargent Platform Edition
  • Check that you are on the most current version of Chargent by using our Update Chargent button on our Installation Page.

update chargent

If you are on the latest version you will see the message (Up to date) under the package options.

ord

Creating the Take Payment Flow

To create the flow you need to first have the variables created that will help in your flow process.

If you are looking to create a new Chargent Order every time, you will need to add a Create Record Element first before adding the Screen Element.


  1. Click the gear icon and select Setup
  2. In the Quick Find search and select Flows
  3. Click the [New Flow] button
  4. Choose Screen Flow
  5. Choose either Freeform or Auto-Layout


How you proceed will be dependent on whether you choose Freeform or Auto-Layout. Freeform you will drag your Elements from the left panel. For Auto-Layout you select the elements using the [ + ] sign

Add the Screen Element for Take Payments.

Next you want to add the Screen Element. This is where you will add the custom Component for Take Payments Flow.

  1. Click on the [ + ] or drag the Screen Component into the Flow
  2. Click on the [Flow Label] and name the Label ‘Take Payments Flow
  3. Click the Chargent Take Payment Component
  4. Enter in all the values based on the below examples
  5. Click [Done]

chargent take payment

Configured using the Chargent Order Object

Label Description Example Value
Charge Amount Field API Name API Name from this Object or Flow for the amount to be charged ChargentBase__amount__c
Gateway ID ID of the gateway you wish to use for the Take Payment You should copy the record ID from your Gateway record
Payment Form Title Payment Form Title Take Payment Screen
Record ID RecordId Variable (Sobject or ChargentOrder ) This will be a variable or resource to the Chargent Order object
Account Number / IBAN Label for what you want the Account Number to read Bank Account Number
Billing Contact Field API Name the Field API Name (Contact lookup field) ChargentBase__Contact__c
Chargent Object Lookup Field API Name Field API Name (Chargent object lookup Field) ChargentBase__Chargent_Order__c
Include Country Address Field If we Include Country Field on the form {!$GlobalConstant.True}
Include Email Address Field If we Include Email Address Field on the form {!$GlobalConstant.True}
Routing Number / BSB Labe for what you want the Routing Number / BSB to Read BSB Number

NOTE: The below value should not be changed, if so it will affect the behavior of the component.


Label Description Default Value
screenFlowToastEnabled Show a Toast on ScreenFlow {!$GlobalConstant.True}
start screen flow

Activate Your Flow

To activate the flow, click the back arrow or from the Setup page search and select Flows.

  1. On the dropdown menu to the right of the Take Payments Flow, select ‘View Details and Versions

    ord

  2. Click ‘Activate’ next to the verison you want to activate the Flow

  3. flow versions

Adding the Take Payments Flow to your Page 

  1. Go to the page where you want to include the Take Payments Flow
  2. Click the gear icon and choose Edit Page
  3. Drag the Flows Component into the Page
  4. Click on the Flows Component you just added.
  5. Delete any Flow that may be pre-populated
  6. Select the Take Payment Flow
  7. Save the page.

flow versions

Using Flow-Variables as Input Configuration

The TakePayment Component can be configured using Flow Variables. Below is an example of a basic Flow and using a Flow Variable for the Chargent Order.

  1. Add the Get Records Element

    add element

  1. Configure the Get Records Element
    In this example, we are going to retrieve all the Chargent Orders Record and store it in a Variable

    chargent order

From here we can access the First Record from that Search in this Variable:
{!OrderRecords.Id} 

  1. Create a Screen Component and Add a Display Text
    Using the {!OrderRecords} variable, we can use it to show the Order information

    chargent order

  2. Use the {!OrderRecords.Id} variable to get the RecordID and use it on the Take Payment Component

    chargent order

  1. Finally, test the component and confirm that the Flow Variable is working as Expected

    chargent order

NOTE: SCA scenarios can not be executed: Screen Flows are not compatible with iframes and opening external URL pages.