AppFrontier

Table of Contents

Chargent Documentation


Payment Requests and Console

Chargent gives you a number of interfaces for controlling payments inside Salesforce.

  • Payment Request enables you to send links to your customers so they can securely enter their payment details online

  • Payment Console gives you a popup window for entering credit card or bank payment details while on the phone with your customer

  • Chargent Anywhere ties together both Payment Request and Payment Console, enabling them to be accessed from anywhere in Salesforce, as well as making Recurring Billing setup easier.

Chargent Anywhere

Chargent Anywhere allows you to process payments from any object in Salesforce. The Chargent Anywhere component contains four buttons.

  • Send Pay Request - Allows you to send an email with a URL to a secure payment page
  • Payment Console - Allows you to enter credit card information in a secure manner and either process one time payment or setup recurring billing.
  • Add Cash - Allows you to create a transaction record for a cash entry (does not get sent to your payment gateway).
  • Add Check - allows you to create a transaction record for a paper check entry (does not get sent to your payment gateway).

Using Chargent Anywhere with Payment Console and tokenization you reduce the scope of PCI Compliance by never storing sensitive credit card or bank account number information in Salesforce.

For an overview of configuring Chargent Anywhere, Payment Requests, and Payment Console, check out the following video.



For setting up and customizing Chargent Anywhere, check out our Chargent Anywhere Quick Start Guide for Chargent Anywhere

Also check out the Chargent Anywhere User Guide for Chargent Anywhere.

Payment Requests

Our Payment Request feature allows you to generate and send a payment link (URL) to your customers directly from any object you’ve configured Chargent Anywhere on. This payment link can also be used in Salesforce email templates, your own email service / application, over IM, or really any media that has clickable links!

Chargent's Payment Request feature is available as a button on the Chargent Order, and can also be added through Chargent Anywhere, It is available with Chargent’s Sites Edition and above. Setup for Payment Request is required.


send payment

Payment Request Setup & Configuration

Note: Salesforce will be applying Security Updates that will affect how Payment Requests work in Chargent. This guide is designed to help you set up Payment Requests for the first time or If you’ve already applied these updates (or want to prepare for the updates).


Pre-requisites:

  1. Setup your Site:

  2. Note: If you are upgrading, you will need to replace the "Active Site Home Page" component with the "PaymentRequest" lightning web component to use your original pages. This is done by going into your Salesforce Setup and Editing your Site.

    • Create a Site
    • Click the gear icon and choose Setup
    • In the Quick Find type and select Sites
    • Click "New" to Create a New Site
    • Site Label: Choose a name, for example: Payment Request
    • Site Name: Choose a name, for example: PaymentRequest
    • Clickjack Protection Level: Use default or check with your IT department
    • Select PaymentRequest as Active Site Home Page
    • Active: Checked
    • Require Secure Connections (HTTPS): Checked
    • Save

    site

  3. Setup My Domain

    • Click the gear icon and select Setup
    • In the Quick Find search for and Select “My Domain”
    • Follow the steps to setup My Domain

    domain

    Note: There is a time delay between Domain Registration and Domain Ready for Testing. You have to complete all steps and Deploy the domain to Users.

Payment Request Setup

If you are version 5.84 or lower, you will want to update to our current version otherwise please check out the archived v1 documentation for help setting up Payment Requests.

Once you have My Domain deployed and your Site setup, you will want to make sure you are on Chargent version 5.84 or newer. If you are on an older version of Chargent you can upgrade using our PIM (Package Installation Manager).

You will now have access to the Chargent Payment Request Setup Wizard.

  1. Click on the App Launcher and select the Chargent app
  2. Click Chargent Settings
  3. Click the sub tab for Chargent Payment Request Setup Wizard.

The App will determine if you have a previous version of Payment Requests installed and will walk you through mirroring the existing setup. If this is your first time installing Payment Requests, it will guide you through the process.

Site Selection:

The first step of the configuration is the Site Selection. Here you will see the Salesforce Site you setup previously and any additional Sites that may have already been setup. You will choose the one dedicated to your Payment Requests:

selection

Configure:

The configuration page will mirror your Gateway settings. If this is your first time setting up Payment Requests, it will provide the recommended settings, otherwise it will mirror your Payment Request settings on the Advanced Settings tab. It will allow you to set what

  • Payment Methods you want
  • Create Payment Requests for all Chargent Orders
  • Show email field in billing address
  • When to have Payment Requests Expire (Now in Days instead of Hours)
  • Debug
  • Show Country field in billing address

configure

Layout:

When Use Custom Pages is enabled, your Customized Payment Request Visualforce pages will be used. If it’s disabled, it will use the default payment page for your Payment Request links and allow you to make some customizations.

  • Upload your Company Logo (needs to be uploaded at actual size)
  • Where on the Page should the form appear?
  • Edit the Welcome Text. This is the text they will see when they open the Payment Request link.
  • Edit your Success Message, Failure Message, and Cancel Message
  • Edit your Page Footer

Review:

Allows you to Preview the Page and finish.

Sending a Payment Request

Currently you can only send Payment Requests directly from the Chargent Order. To send a Payment Request:

  1. Create a new Chargent Order.
  2. Click the Send Payment Request button.
  3. Enter in the Email Address that you want to send to.
  4. Click the Send Request button.

send

The new Payment Request page will look different than the original Payment Request page.

pay

payment

You are now setup with the new Chargent Payment Request LWC feature

Payment Requests for Developers


Using Custom Pages

If you choose to use Custom Pages for Payment Request, this section will outline how to create and prepare those pages. Please note that this section contains developer-level actions. As such, it is best practice that a Salesforce Certified Developer performs these tasks.

Useful Links
Use Lightning Components in Visualforce Pages
Using apex:slds

Existing Payment Request Pages

If you were already using Chargent Payment Request prior to upgrading to Chargent Base 5.84, and would like to continue using those customized pages, you will need to comment out the visualforce tag for the sitePaymentComponent and replace it with our new Chargent Payment Request Lightning Web Component.

An example custom page from the previous version of Payment Request might look like this:

<apex:page showHeader="false" standardStylesheets="true" id="page">
      <apex:outputPanel id="content" layout="block" styleClass="customstyle">
            <ChargentOrders:SitePaymentComponent showAddress="true" cancel="/PaymentCancel" success="/PaymentSuccess" fail="/PaymentFail"/>
      </apex:outputPanel>
      <apex:outputPanel id="footer" layout="block">
            <apex:outputPanel layout="block" styleClass="footer">
                  <apex:outputText value="AppFrontier LLC | 870 Market Street, Suite 809 | San Francisco, CA 94102 | USA | " styleClass="footertext"/>
                  <apex:outputLink value="http://www.AppFrontier.com" >www.AppFrontier.com</apex:outputLink>
                  <apex:outputText value=" | " styleClass="footertext"/>
                  <apex:outputLink value="mailto:chargent@appfrontier.com" styleClass="maillink">chargent@appfrontier.com</apex:outputLink>
                  <apex:outputPanel layout="block" styleClass="band" />
            </apex:outputPanel>
      </apex:outputPanel>
</apex:page>

In this example, the line you are looking for is:

<ChargentOrders:SitePaymentComponent showAddress="true"cancel="/PaymentCancel"success="/PaymentSuccess"fail="/PaymentFail"/>

To comment it out you would place a after this line

Changing it to this:

<!-- <ChargentOrders:SitePaymentComponent showAddress="true"cancel="/PaymentCancel"success="/PaymentSuccess"fail="/PaymentFail"/> -->

Once complete, the next step is to add the chargentPaymentRequest component to the page. Adding the Chargent Payment Request LWC Component to your Payment Request page works just like adding any other LWC on a visualforce page as outlined in the Salesforce documentation linked above.

First, make sure your page has the following tag within its markup:

<apex:includeLightning />

Next, add the chargentPaymentRequest Lightning Web Component. Where to place the component is completely dependent on your implementation. If you already have an existing payment request page with the old sitePaymentComponent, the best starting place will be the same place that line of code was or just below it if you have commented it out.

Place this code where you want it on the page. There are additional options you can set, which will be described below. Please refer to the salesforce documentation linked above on how to use those options and where to specify them.

<script type="text/javascript">
      $Lightning.use("ChargentBase:ChargentTakePaymentApp", function () {
            $Lightning.createComponent(
                  "ChargentBase:chargentPaymentRequest",
                  {
                        'formName': 'Pay Request Form',
                        'req': '{!$CurrentPage.parameters.req}'
                  },
                  "container",
                  function (cmp) {}
            );
      });
</script>
<div id="container"></div>

Note: The div with the id of “container” is where the platform will render the component. The script block can be placed anywhere on the page but typically is placed near this div.

Chargent Payment Request Configuration

The component you place on your page has several parameters used to properly render the component.

Parameter Type Required Description
req String YES Must be set to: 

'{!$CurrentPage.parameters.req}'

DO NOT set to anything else
formName String NO The header that will be displayed with the payment request form
hideEmailField Boolean NO Defaults to false. Set to true if you do not wish to display the email address field on the payment form
hideCountryField Boolean NO Defaults to false. Set to true if you do not wish to display the country field on the payment form
failPage String NO If using custom pages, set this to the name of the Visualforce page you wish to display to the user for a failed transaction
successPage String NO If using custom pages, set this to the name of the Visualforce page you wish to display to the user for a successful transaction
cancelPage String NO If using custom pages, set this to the name of the Visualforce page you wish to display to the user if they click cancel on the payment request page

Setting Custom Result Pages

Assume you have visualforce pages named:

  1. FailPage
  2. Success Page (Make sure to replace the space with _ )
  3. CancelPage

You would specify this in the component as follows:

<script type="text/javascript">
      $Lightning.use("ChargentBase:ChargentTakePaymentApp", function () {
            $Lightning.createComponent(
                  "ChargentBase:chargentPaymentRequest",
                  {
                        'formName': 'Pay Request Form',
                        'req': '{!$CurrentPage.parameters.req}',
                        'failPage' : 'FailPage',
                        'successPage' : 'Success_Page',
                        'cancelPage' : 'CancelPage'
                  },
                  "container",
                  function (cmp) {}
            );
      });
</script>
<div id="container"></div>

Activating Your Custom Pages

Now that you’ve edited your pages to include the proper chargentPaymentRequest component, follow these steps to activate your Custom Pages:

  1. Navigate to Setup > Sites & Domains > Sites
  2. Click the [Edit] button next to the Site your Payment Request configuration is using
  3. Click the Search icon next to the “Activate Site Home Page” field
  4. Select the Visualforce page you customized for Payment Request
  5. Click the [Save] button

Note: These steps describe the most direct implementation of using the custom page you’ve created: adding it as the Active Site Homepage. However, when using custom pages, the payment request link will navigate the user to the Active Site Home Page for the specified site. Where you add your custom page to your site depends on your specific implementation requirements. The two options are:

  1. Active Site Homepage
    • Placing your custom page here means that anyone who accesses the site URL will be presented with your custom Payment Request page
  2. Available Visualforce Pages
    • Placing your custom page here will require that your active site homepage is coded to serve up the correct page. This is useful if you are using your site for multiple purposes or want to present another page prior to the Payment Request

Now that you’ve edited your Site to point to your custom Visualforce page, it’s time to toggle the “Use Custom Page” setting to Enabled in the Payment Request Setup Wizard.

  1. Click the App Launcher icon applauncher at the top-left of your screen, then click the “Chargent” app
  2. Click the “Chargent Settings” tab
  3. Click the “Chargent Payment Request Setup Wizard” tab
  4. Click the [Next] button to navigate to the Layout page of the wizard
  5. Click the toggle switch for “Use Custom Page”
  6. Click the [Next] button, then click the [Finish] button

Your custom pages are ready to test. Create a new Payment Request record and follow the Payment Link to view and test your custom page.

Basic Custom Page Code

If you’re using Custom Pages and need a quick starting point, here’s the code for that. Note that this code includes only our chagentPaymentRequest component and nothing else. You may place this component in any section / table / etc, and it will expand to fill the available space. You’ll want to customize this further to include your branding, layout, tracking pixels, etc.

<apex:page showHeader="false" standardStylesheets="true" id="PaymentRequest" cache="false">

      <apex:includeLightning />
      <apex:slds />

            <script type="text/javascript">
                  $Lightning.use("ChargentBase:ChargentTakePaymentApp", function () {
                        $Lightning.createComponent(
                              "ChargentBase:chargentPaymentRequest",
                              {
                                    'formName': 'Pay Request',
                                    'showCountryField': true,
                                    'showEmailField': true,
                                    'req': '{!$CurrentPage.parameters.req}'
                              },
                              "container",
                              function (cmp) {
                              }
                        );
                  });
            </script>
      <div id="container"></div>

</apex:page>

Payment Console

Chargent's Payment Console feature allows you to submit payments directly from a Salesforce popup window to your payment gateway, without saving or storing account numbers in Salesforce. Payment Console works with both credit card and ACH (electronic check / direct debit) payments, and is recommended for phone orders / MOTO payments.

Payment Console doesn’t store payment information, and combined with tokenization it can help reduce the scope of your PCI Compliance.

The Payment Console in Chargent Anywhere has some additional features that allow you to do the following in a few easy steps:

  • Process a one time payment.
  • Setup Recurring Billing (subscriptions).
  • Process a one time payment and setup a recurring billing schedule.

charge one

Configuration of Payment Console allows you to configure and auto-populate several fields to simplify your recurring billing setup. You can set the defaults for the following items.

  • Default Charge Amount - What amount will always be populated in the Payment Console
  • Default Recurring Amount - What recurring billing amount will automatically be populated in the Payment Console
  • Default Gateway - If you are using multiple gateways, you can set this to populate a specific one based on Page Layout and Salesforce object hosting Chargent Anywhere.
  • Billing Account Lookup - This makes it easier to lookup an account and assign a contact from that account.
  • Billing Contact Lookup - This allows you to select a contact record to quickly process a payment for that account.
  • Custom Name your Charge button - You can name the Charge button whatever you want to fit your company’s theme.

chargent

Payment Console is available with Chargent’s Platform Edition or above.

  • Check out the complete Recurring Billing documentation for setting up Recurring Billing via the Payment Console and Chargent Anywhere.

Account Updater

Account Updater is a Scheduled Apex batch which checks the Credit Card Expiration Date fields on the Chargent Order Transaction package. Credit Cards that are expiring this month (or are already expired when the batch runs) are sent update notifications.

Please note that many Payment Gateways offer Account Updater services as well. These work without the cardholder needing to make any update, by updating the card on file related to the token stored in Salesforce.


Account Updater is based on Chargent's Payment Request feature, and works similarly, but simply stores updated billing information without processing a payment. An email notification is sent to customers with expired or expiring cards, with a link that takes them to a self-service hosted payment page.

Hosted on your own Salesforce Site, the payment page features a brandable, secure credit card form, where your customers enter their payment information. A customer's billing address is already populated on the form, and they can update it if they wish, along with providing new credit card details. Those values are automatically updated into the associated Salesforce Chargent Order record. This saves time in tracking down customers to provide updated credit card information.

card

For complete details and setup of Account Updater, check out our Account Updater documentation page.