AppFrontier

Table of Contents

Chargent Documentation


Chargent Developer API

Development using Chargent’s API requires existing customers to be on Chargent’s Platform Edition or above. Full API documentation is available by request for customers who meet those requirements.


Chargent has an extensive, PCI compliant API for web site integrations. These web services are available as an extension to the standard SOAP API that Salesforce offers, so they can be called in the same way that you interact with other parts of the Salesforce API.

You can also call Chargent methods directly from inside Salesforce, without a user initiating them in the normal manner, such as from a customized Visualforce interface.

The Chargent web services API requires a Chargent Platform edition license. Please contact us for complete documentation and details.

Chargent's API allows you to programmatically call the following actions:

  • Charge
  • Charge Authorized
  • Authorize
  • Refund
  • Void
  • Register Token
  • Generate Payment Request
  • Parse payment result message and status

For complete information regarding Chargents API please check out our online Developer documentation page.

Payment Gateway Integrations

Chargent includes ready-to-go integrations to more than 30 payment gateway integrations. Choose from Authorize.net, CyberSource, Stripe, Paypal Payflow Pro, NMI, Merchant e-Solutions, and more. You can even connect to multiple payment gateways simultaneously with Chargent, to support different business units or currencies.

For more information on Chargent’s Payment Gateway integrations, please see our Gateways page.

Salesforce Communities

Chargent can be used with Salesforce Customer Communities and Partner Communities, as well as the legacy Customer Portal and Partner Portal products. Empower your customers and partners to make payments, update billing information, view invoices and more. Please see our guide to Enabling Payments in Salesforce Customer Communities and Partner Portals

Check out our Demo of 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.

Zero Footprint Tokenization (Developer Lightning Component)

Overview

The Zero Footprint tokenization component is a lightning component that allows the developer to quickly implement tokenization of payment data in a configurable UI anywhere within your salesforce ecosystem. The component will fire an event upon tokenization for you to obtain the necessary results and optionally can update the payee details with the entered data as well as create a corresponding chargent order and chargent transaction.

Placement

The component does not require an underlying SObject and can be placed within a lightning app as well as within your own lightning component. While it does not require an underlying SObject for placement, it does require an SObject that supports the configurable payee detail fields.

For example, the component can be placed within a component in your lightning application and use the SObject Contact to support the payee fields that you wish to display

Usage

The component can simply be used within your markup for your lightning component. There are some parameters that need to be set as well as some optional parameters. These are outlined below

Component

<ChargentBase:zeroFootprint_Tokenization ..../>

Parameters

GatewayId (Required)

This is the salesforce Id of the gateway record to use for the tokenization.

Note: The payment entry screen will respect the settings on this gateway record. If, for example, you have not selected Credit Card as a payment option then it will not be displayed. Another example, would be if you have not selected Visa as an accepted credit card type then it would not allow the user to complete the tokenization with a visa card number.

If the gateway has the “Require CVV in payment console” set to true then the payment entry screen will also require the CVV to be entered.

buttonLabelPayeeSubmit (default: Next)

When in one column mode this will be the label on the button to submit the entered payee details and continue to the next screen to collect the payment information.

buttonLabelTokenize (default: Submit)

This is the label of the button to tokenize the payment information. In one column mode this will be the button on the second screen where the user enters the payment information. In two column mode this will be the only button displayed.

twoColumnLayout (default: false)

This indicates the display mode.

When false, the component will present the payee details first, then the user clicks the payee submit button and is taken to the payment entry screen where they will enter their payment data and click the tokenize button. Useful for small modal windows and the narrow side of a lightning layout.

When true, the component will present both the payee details and payment information side by side on one screen. Then the user enters the appropriate data and then clicks the tokenize button. Useful for medium to large modal windows and the wide side of a lightning layout.

payeeRecordId (Id - not required)

If using an pre-existing record to pre-populate or associate the payee details with set this Id to the desired record Id. This field is not required. If not set and “updatePayeeRecord” is set to true a new payee object will be created.

payeeObjectType (String - Required)

This is the Object type of the payeeRecordId (if set) or the object type of the object where the specified payee fields will be pulled from. This is a required parameter and must be set as that is

How the component knows how to display each of the specified payee fields according to their type.

payeeRecordFieldList (String[] - Required)

This is a comma separated l ist of field API names you wish to display from the payee object specified. These are the field the user will be populating when they use the component.

An example if using the Contact Object Type: FirstName,LastName,MailingStreet,MailingCity,MailingState,MailingPostalCode

payeeToChargentOrderFields (Object - Required)

While no underlying SObject is required to place the component, it does rely on an abstract version of the Chargent Order. In order to properly associate the fields you wish to display with the appropriate data to send to the gateway this mapping will need to be provided.

The mapping is a javascript object with key value pairs wrapped in {}. The key is the payee SObject Field API Name and the value is the corresponding Chargent Order field API name

Key: Payee SObject Field API name

Value: Corresponding Chargent Order field API name

An example mapping using the contact fields specified above:

{'FirstName':'ChargentOrders__Billing_First_Name__c','LastName':'ChargentOrders__Billing_L ast_Name__c','MailingStreet':'ChargentOrders__Billing_Address__c','MailingCity':'ChargentOrd ers__Billing_City__c','MailingState':'ChargentOrders__Billing_State__c','MailingPostalCode':'ChargentOrders__Billing_Zip_Postal__c'}

This is passed in as one long string. In order to see it a bit more clearly we have prettified it a bit.

below. Do not pass the information in the below format

{

"FirstName": "ChargentOrders__Billing_First_Name__c", "LastName": "ChargentOrders__Billing_Last_Name__c", "MailingStreet": "ChargentOrders__Billing_Address__c", "MailingCity": "ChargentOrders__Billing_City__c", "MailingState": "ChargentOrders__Billing_State__c", "MailingPostalCode": "ChargentOrders__Billing_Zip_Postal__c"

}

In the above examples you can see it has been specified that the FirstName be associated with the ChargentOrders__Billing_First_Name__c field and so on. This is dynamic and will depend on your configuration for the payee fields and SObject type

orderStaticValueMap (Object - Not required)

This parameter is used to pass specific static information to the gateway during tokenization but do not wish to display that information to the user or obtain their input. The fields that can be passed are limited to:

- ChargentOrders__Payment_Method__c - ChargentOrders__OrderSource__c

- ChargentOrders__Order_Information__c - ChargentOrders__Description__c

- ChargentOrders__Currency__c

- ChargentOrders__Customer_IP__c

This is similar to the format of the payeeToChargentOrderFields parameter except the key is the Chargent Order Field API Name and the value is the value to be sent.

Key: Corresponding Chargent Order field API name Value: value to be passed through to the gateway

An example using order information is: {'ChargentOrders__Order_Information__c':'An example Information'}

createChargentOrder (Default: false)

This parameter indicates if a Chargent Order and related chargent transaction record should be created as a result of the tokenization.

updatePayeeRecord (Default: false)

This parameter indicates if you wish to have the specified payee record updated or in the case of no payeeRecordId parameter created. If this is not set to true the entered information will be passed on to the gateway but the underlying payee record will not be altered or created.

Tokenization Event

When the tokenization is complete an event named ChargentBase:tokenizationEvent is fired. Components including the Zero Footprint tokenization component can handle this event and perform actions based on the results of the tokenization event.

Event Parameters

Parameter Type Description
success Boolean Tokenization successful
accountName String Credit card or bank account holder name
accountFirstName String Credit card or bank account holder first name
accountLastName String Credit card or bank account holder last name
accountStreet String Account holder billing street
accountCity String Account holder billing city
accountState String Account holder billing state
accountPostalCode String Account holder billing postal code
cardExpirationMonth String Credit card expiration month
cardExpirationMonth String Credit card expiration month
cardExpirationYear String Credit card expiration year
accountLast4 String Last four of the credit card or bank account number
bankRoutingNumber String Bank account routing number
paymentMethod String Credit Card or eCheck
paymentType String The card type or bank account type
gatewayStatus String The status returned by the gateway. If there was a platform error this will be set to “ERROR”
gatewayMessage String Either the gateway message or Exception message
gatewayReasonText String The returned reason text from the gateway
gatewayReasonCode String The returned reason code from the gateway
gatewayId String The id assigned to this transaction by the gateway
gatewayResponse String Full response from gateway
paymentToken String The returned payment token, if any
chargentTransactionId String The salesforce Id of the created transaction if createChargentOrder is set to true
payeeRecordId String The id of the payee record that was created or updates during this transaction. Wil be null if the updatePayeeRecord parameter is false 

Example

An example implementation of the component placed on the opportunity object embedding the Zero Footprint tokenization component within it.

This example can be used to quickly create a lightning component and begin playing with the various options.

Design

<design:component>
       <sfdc:objects>
            <sfdc:object>Opportunity</sfdc:object>
      </sfdc:objects>
      <design:attribute description="Gateway Id" name="gatewayId"
label="Gateway Id"/>
      <design:attribute description="Create or Update Payee" name="updatePayeeRecord" label="Update Payee Record" default="false"/>
      <design:attribute description="Label for payee submit button" name="buttonLabelPayeeSubmit" label="Label for Payee Submit button" default="Next"/>
      <design:attribute description="Label for tokenization button" name="buttonLabelTokenize" label="Label for tokenization button" default="Submit"/>
      <design:attribute name="twoColumnLayout" default="false" label= "Two Column Layout" description="show payee details and payment entry side by side in two columns"/>
      <design:attribute name="contactLookupAPIName" l abel="Billing Contact Lookup API Name" description="The API name of the billing contact lookup on Opportunity"/>
</design:component>

Component

<aura:handler name="init" value="{!this}" action="{ !c.doInit}"/>
<aura:attribute name="gatewayId" type="String" required="true" access="global"/>
<aura:attribute name="updatePayeeRecord" type="Boolean" access="global"/>
<aura:attribute name="buttonLabelPayeeSubmit" type=" String" default="Next" access="global"/>
<aura:attribute name="buttonLabelTokenize" type="String" default="Submit" access="global"/>
<aura:attribute name="contactLookupAPIName" type="String" access="global" required="true"/>
<aura:attribute name="twoColumnLayout" type="Boolean" default=" false" access="global"/>
<aura:attribute name="opportunityFields" type="String[]" access="private"/><aura:attribute name="opportunityRecordFields" type="Object" description="The fields object for reference in markup"
access="private"/>
<aura:attribute name="opportunityRecord" type="Object"
description="The opportunity record" access="private"/> <aura:attribute name="opportunityRecordError" type=" String"
access="private" description="Error messages associated with lightning data service for the opportunity record"/>
<aura:handler name="tokenEvent" event="c:tokenizationEvent" action="{!c.handleTokenization}"/ >
<force:recordData aura:id="opportunityRecord" layoutType="FULL"
recordId="{!v.recordId}" targetRecord="{!v.opportunityRecord}" targetFields="{!v.opportunityRecordFields}" fields="{!v.opportunityFields}" targetError="{!v.opportunityRecordError}" mode="VIEW"/>
<lightning:card title="Payment Tokenization"> <div class="slds-p-around_medium">
<div aura:id="tokenComponent"> <aura:if
isTrue="{!not(empty(v.opportunityRecordError))}"> <div
class="{!if(empty(v.opportunityRecordError),'slds-hide','recordError')}">
severity="error" closable="true">
<ui:message title="Error"
{!v.opportunityRecordError}
</ui:message>
</div>
<aura:set attribute="else">
<ChargentBase:zeroFootprint_Tokenization twoColumnLayout="{!v.twoColumnLayout}" buttonLabelTokenize="{!v.buttonLabelTokenize}" buttonLabelPayeeSubmit="{!v.buttonLabelPayeeSubmit}"
payeeRecordFieldList="FirstName,LastName, MailingStreet,MailingCity,MailingState,MailingPostalCode"
updatePayeeRecord="{!v.updatePayeeRecord}" payeeObjectType="Contact" GatewayId="{!v.gatewayId}"
payeeRecordId="{!v.opportunityRecordFields.ChargentBase__Billing_Contact__c }" payeeToChargentOrderFields="{'FirstName':'ChargentOrders__Billing_First_Nam e__c','LastName':'ChargentOrders__Billing_Last_Name__c','MailingStreet':'Ch argentOrders__Billing_Address__c','MailingCity':'ChargentOrders__Billing_Ci ty__c','MailingState':'ChargentOrders__Billing_State__c','MailingPostalCode ':'ChargentOrders__Billing_Zip_Postal__c'}" orderStaticValueMap="{'ChargentOrders__Order_Information__c':'An example Information'}
/> </aura:set>
</aura:if> </div>
<div aura:id="result-div" class="slds-grid slds-size_1-of-1" id="result-div"></div>
</div>
</lightning:card> </aura:component>

Controller

({
doInit: function(component,event,helper){component.set("v.opportunityFields",component.get("v.contactLookupAPIName") );
},
handleTokenization: function(component,event,handler){
} })
var result = JSON.stringify(event.getParams(),null,2); $A.util.addClass(component.find("tokenComponent"),'slds-hide'); component.find("result-div").getElement().innerText = result;

Images of results

One column Layout

Payee Details
Payment Tokenization

Payment Entry Screen

Credit Card
Payment Credit Card

Payment Tokenization

Bank Account
Payment Tokenization

Payment Tokenization

Results
Payment Tokenization


Two Column Layout

Payment Tokenization

Payment Tokenization

Payment Tokenization

Payment Tokenization

Accept Card Payments

  1. Download the package from the AppExchange
  2. Create a Stripe account if you don’t already have one.


Getting your Stripe API Secret Key

  1. Login to Stripe and Copy the API Secret Key
    1. Go under Developer > API keys > Reveal live/test Secret Key (for testing you should enable the View Test Data switch in Stripe.

    Api Key

  2. In Salesforce you want to configure the Visualforce Page
    1. Click the gear icon in the top right and choose Setup
    2. Navigate to Custom Code > Visualforce Pages
    3. Click the Preview in a New Window icon next to the StripeAPIConfig page.

    Api VisualForce Pages

  3. Copy your API Key and click Store Key (Note: If you’ve already stored an API key it will prompt you to Update API Key)



Create the Flow in Salesforce

  1. Click the gear icon in the top right and choose Setup
  2. Under Process Automation select Flows

Step 1 Create the First Screen

  1. Click New Flow
  2. From the Pallette drag Screen into the Flow

  3. Flow  in Salesforce

  4. Name your Screen (Ex: Take Card Payment)
  5. Under the Add a Field tab select Lightning Component

  6. Api screen add field

  7. From the Field Settings tab
    1. Add a Unique Name 
    2. Choose the Lightning Component csca:FlowStripeCharger
    3. Input Status (the default text that you would like in your flow)
      1. Billing Name; (choose a default billing name for your form, ex: John Wayne or Mickey Mouse)
      2. Charge Amount: (choose the default amount for your form)
    4. Output 
      1. Attribute = Response Status 
      2. Variable = {!ResponseStatus} 

Step 2 Create the Second Screen

  1. From the Pallette drag a new Screen into the Flow
  2. Name your Screen Response Details
  3. Under the Field tab select Display Text
  4. Under the Add a Field tab choose Display Text
  5. Under Field Settings Name the Field Response
  6. Select the Resource {!ResponseStatus}



Connecting your Screens

  1. Run your mouse over the first Screen and click the green arrow pointing down. This indicates that this is the first Screen and the start of the flow.
  2. Click and drag the diamond at the bottom of your first Screen to the 2nd Screen. This will create an arrow to connect the two. It determines the path the flow will take.

  3. Api Connecting Screens

  4. Click Save and name the Flow



Testing your Flow

  1. Click Run to test the flow. 

  2. Api Test Take payment

  3. Use Credit Card Number 4111 1111 1111 1111 with any other information to receive an approved status.

  4. Api Test Thank you



Salesforce Nonprofit Starter Pack Documentation

Coming soon