AppFrontier

Payment Request Documentation

Please Note: These instructions are for standard Chargent, if you are using the Chargent Connector for FinancialForce please refer to our setup PDF for instructions on setting that up, as they are different.


Chargent Payment Request Documentation



Overview

Chargent Payment Request, one of the developer tools that is part of the Chargent Payment Processing for Salesforce application, allows you to generate requests for payment to send to your customers. These requests can be in the form of links contained in Salesforce email templates, you can also send them in your own email, over IM or really any media that has clickable links!

Your customers simply click on the link in a payment request email they receive to go to a hosted payment page, where their contact information and the amount is already populated. Hosted on your own Salesforce Force.com Site, the payment page features a brandable, secure credit card form, where your customers enter their payment information. Once payment is made, the transaction is recorded in Salesforce and the correct records are updated.

Requirements

Please Note: the Chargent Payment Request feature requires a Chargent Platform or Sites edition license for use outside of a Salesforce Sandbox.
 
For this reason we encourage development in a Salesforce Sandbox. Please contact us for additional information.

Setup

To use Chargent Payment Request, your Salesforce Administrator or Developer first needs to set up a Salesforce Force.com site, and then grant access to the correct profiles, objects, VisualForce pages, and Apex Classes.

Steps to setup payment request are as follows:

  1. Install and Configure Chargent

    • Set up a Gateway and a test Chargent Order, Opportunity or Case record
    • Run a test by clicking on the Charge button to ensure that your Payment Gateway credentials are set up correctly before proceeding with Payment Request setup

  2. Obtain a License Key from Chargent

    • NOTE: This step is only necessary for Production / Development orgs. Sandbox installations do not require a license key.

    • Go to the Chargent Settings tab
    • Click on the Chargent Feature Activation sub-tab
    • Click the Request Key button
    • Check the box next to Payment Request and Send
    • A license key will be emailed to you by an AppFrontier team member
    • Enter the license key and click the Check and Save Key button

     

    Request a Payment Request License Key


  3. Set up the Visualforce pages

    • Create a Visualforce page for Success
      • Click the Gear icon on the top right and choose Setup
      • Under Custom Code select Visualforce Pages
      • Click New
      • Name the page Success
      • Copy and Paste the code under the Success tab below
      • Click Save

     

    Payment Request Visualforce Pages


    • Do the same and create a new page for the following:
      • Fail
      • Cancel
      • Payment Requests

      You should have 4 Visualforce pages total.



      <apex:page showHeader="false" standardStylesheets="true" id="page">
      	<apex:outputPanel id="header" layout="block">
      		<!-- This is a Header block. Paste your APEX or HTML code here. -->
      
      		<!-- APEX image example: -->
      		<apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" style="display: block; margin: 0 auto; margin-bottom: 20px;"/> <!-- height="100px" width="410px"  -->
      
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      
      		<!--
      		<style type="text/css">
      			.header {
      				background-color: lightgray;
      				text-align: center;
      				color: black;
      				font-size: 20px;
      				height: 100px;
      				/*margin-bottom: 20px;*/
      			}
      			.headertext {
      				line-height: 100px;
      			}
      		</style>
      		 -->
      
      		<!-- Simple APEX header example: -->
      
      		<!--
      		<apex:outputPanel layout="block" styleClass="header">
      			<apex:outputText value="Simple Header" styleClass="headertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      
      	<apex:outputPanel id="content" layout="block">
      		<!-- Paste your Success Page APEX or HTML code here -->
      		<apex:pageBlock >
      			<apex:pageMessage summary="Success! The action was successful!" severity="confirm" strength="3" />
      		</apex:pageBlock>
      	</apex:outputPanel>
      
      	<apex:outputPanel id="footer" layout="block">
      		<!-- This is a Footer block. Paste your APEX or HTML code here. -->
      
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      
      		<style type="text/css">
      			.footer {
      				background-color: whitesmoke;
      				text-align: center;
      				color: black;
      				font-size: 14px;
      				height: 130px;
      				/*margin-top: 20px;*/
      				position: absolute;
      				bottom:0;
      				width: 100%;
      				border-top: 1px solid lightgray;
      			}
      			.footertext {
      				line-height: 50px;
      			}
      
      			.maillink, .maillink:hover {
      				color: red;
      				text-decoration: none;
      			}
      			.band {
      				height: 80px;
      				background-color: gray;
      			}
      		</style>
      
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="AppFrontier LLC  | 620 Folsom Street, Suite 100  |  San Francisco, CA 94107  |  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>
      
      
      		<!-- Simple APEX footer example: -->
      		<!--
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="Simple Footer" styleClass="footertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      </apex:page>
      								


      <apex:page showHeader="false" standardStylesheets="true" id="page">
      	<apex:outputPanel id="header" layout="block">
      		<!-- This is a Header block. Paste your APEX or HTML code here. -->
      		<!-- APEX image example: -->
      		<apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" style="display: block; margin: 0 auto; margin-bottom: 20px;"/> <!-- height="100px" width="410px"  -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<!--
      		<style type="text/css">
      			.header {
      				background-color: lightgray;
      				text-align: center;
      				color: black;
      				font-size: 20px;
      				height: 100px;
      				/*margin-bottom: 20px;*/
      			}
      			.headertext {
      				line-height: 100px;
      			}
      		</style>
      		 -->
      		<!-- Simple APEX header example: -->
      		<!--
      		<apex:outputPanel layout="block" styleClass="header">
      			<apex:outputText value="Simple Header" styleClass="headertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      
      	<apex:outputPanel id="content" layout="block">
      		<!-- Paste your Fail Page APEX or HTML code here -->
      		<apex:pageBlock >
      			<apex:pageMessage summary="Unfortunately, that payment data did not work. Please either re enter the information or use a different payment source." severity="error" strength="3" />
      		</apex:pageBlock>
      	</apex:outputPanel>
      	
      	<script type="text/javascript">
              var msgBlock = document.getElementsByClassName('messageText')[0];
              var a = document.createElement("a");
              a.href = document.referrer;
              a.style.fontSize = '100%';
              a.style.margin = '0px';
              a.appendChild(document.createTextNode('Click here to get back'));
              msgBlock.appendChild(a);
          </script>
      	<apex:outputPanel id="footer" layout="block">
      		<!-- This is a Footer block. Paste your APEX or HTML code here. -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<style type="text/css">
      			.footer {
      				background-color: whitesmoke;
      				text-align: center;
      				color: black;
      				font-size: 14px;
      				height: 130px;
      				/*margin-top: 20px;*/
      				position: absolute;
      				bottom:0;
      				width: 100%;
      				border-top: 1px solid lightgray;
      			}
      			.footertext {
      				line-height: 50px;
      			}
      
      			.maillink, .maillink:hover {
      				color: red;
      				text-decoration: none;
      			}
      			.band {
      				height: 80px;
      				background-color: gray;
      			}
      		</style>
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="AppFrontier LLC  | 620 Folsom Street, Suite 100  |  San Francisco, CA 94107  |  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>
      		<!-- Simple APEX footer example: -->
      		<!--
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="Simple Footer" styleClass="footertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      </apex:page>
      	


      <apex:page showHeader="false" standardStylesheets="true" id="page">
      	<apex:outputPanel id="header" layout="block">
      		<!-- This is a Header block. Paste your APEX or HTML code here. -->
      
      		<!-- APEX image example: -->
      		<apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" style="display: block; margin: 0 auto; margin-bottom: 20px;"/> <!-- height="100px" width="410px"  -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<!--
      		<style type="text/css">
      			.header {
      				background-color: lightgray;
      				text-align: center;
      				color: black;
      				font-size: 20px;
      				height: 100px;
      				/*margin-bottom: 20px;*/
      			}
      			.headertext {
      				line-height: 100px;
      			}
      		</style>
      		-->
      
      
      		<!-- Simple APEX header example: -->
      		<!--
      		<apex:outputPanel layout="block" styleClass="header">
      			<apex:outputText value="Simple Header" styleClass="headertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      	<apex:outputPanel id="content" layout="block">
      		<!-- Paste your Cancel Page APEX or HTML code here -->
      		<apex:pageBlock >
      			<apex:pageMessage summary="The action has been cancelled." severity="warning" strength="3" />
      		</apex:pageBlock>
      	</apex:outputPanel>
      	<apex:outputPanel id="footer" layout="block">
      		<!-- This is a Footer block. Paste your APEX or HTML code here. -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<style type="text/css">
      			.footer {
      				background-color: whitesmoke;
      				text-align: center;
      				color: black;
      				font-size: 14px;
      				height: 130px;
      				/*margin-top: 20px;*/
      				position: absolute;
      				bottom:0;
      				width: 100%;
      				border-top: 1px solid lightgray;
      			}
      			.footertext {
      				line-height: 50px;
      			}
      
      			.maillink, .maillink:hover {
      				color: red;
      				text-decoration: none;
      			}
      			.band {
      				height: 80px;
      				background-color: gray;
      			}
      		</style>
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="AppFrontier LLC  | 620 Folsom Street, Suite 100  |  San Francisco, CA 94107  |  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>
      		<!-- Simple APEX footer example: -->
      		<!--
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="Simple Footer" styleClass="footertext"/>
      		</apex:outputPanel>
      		 -->
      	</apex:outputPanel>
      </apex:page>
      


      <apex:page showHeader="false" standardStylesheets="true" id="page">
      
      	<!-- Use this CSS style for the page -->
      	<style type="text/css">
      		.customstyle {
      			background-color: white;
      		}
      	</style>
      	<apex:outputPanel id="header" layout="block">
      		<!-- This is a Header block. Paste your APEX or HTML code here. -->
      		<!-- APEX image example: -->
      		<apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" style="display: block; margin: 0 auto; margin-bottom: 20px;"/> <!-- height="100px" width="410px"  -->
      		<!-- HTML image example: -->
      		<!-- <img src="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" height="100px" width="410px" style="display: block; margin: 0 auto;"/> -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<!-- <style type="text/css">
      			.header {
      				background-color: lightgray;
      				text-align: center;
      				color: black;
      				font-size: 20px;
      				height: 100px;
      				/*margin-bottom: 20px;*/
      			}
      			.headertext {
      				line-height: 100px;
      			}
      		</style>  -->
      		<!-- Simple APEX header example: -->
      		<!-- <apex:outputPanel layout="block" styleClass="header">
      			<apex:outputText value="Simple Header" styleClass="headertext"/>
      		</apex:outputPanel>
      		-->
      		<!-- Simple HTML header example: -->
      		<!--
      		<div class="header">
      			<span class="headertext">Simple Header</span>
      		</div>
      		-->
      	</apex:outputPanel>
      	<apex:outputPanel id="content" layout="block" styleClass="customstyle">
      		<!-- You may use some parameters with SitePaymentComponent: -->
      		<!-- 1. showAddress - Boolean value to render the billing address section -->
      		<!-- 2. cancel - Cancel page URL -->
      		<!-- 3. success - Success page URL -->
      		<!-- 4. fail - Fail page URL -->
      		<!-- Component use example: -->
      		<ChargentOrders:SitePaymentComponent showAddress="true" cancel="{!URLFOR($Page.Cancel)}" success="{!URLFOR($Page.Success)}" fail="{!URLFOR($Page.Fail)}"/>
      	</apex:outputPanel>
      	<apex:outputPanel id="footer" layout="block">
      		<!-- This is a Footer block. Paste your APEX or HTML code here. -->
      		<!-- APEX image example: -->
      		<!-- <apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" height="100px" width="100%"/> -->
      		<!-- HTML image example: -->
      		<!-- <img src="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" height="100px" width="100%"/> -->
      		<!-- You may use <style> tag for your styles. -->
      		<!-- CSS style example: -->
      		<style type="text/css">
      			.footer {
      				background-color: whitesmoke;
      				text-align: center;
      				color: black;
      				font-size: 14px;
      				height: 130px;
      				/*margin-top: 20px;*/
      				position: absolute;
      				bottom:0;
      				width: 100%;
      				border-top: 1px solid lightgray;
      			}
      			.footertext {
      				line-height: 50px;
      			}
      			.maillink, .maillink:hover {
      				color: red;
      				text-decoration: none;
      			}
      			.band {
      				height: 80px;
      				background-color: gray;
      			}
      		</style>
      		<!-- APEX footer example: -->
      		<apex:outputPanel layout="block" styleClass="footer">
      			<apex:outputText value="AppFrontier LLC  | 620 Folsom Street, Suite 100  |  San Francisco, CA 94107  |  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>
      		<!-- Simple HTML footer example: -->
      		<!--
      		<div class="footer">
      			<span class="footertext">Simple Footer</span>
      		</div>
      		-->
      	</apex:outputPanel>
      	<!-- OVVERIDE CSS
      	<style type="text/css">
      		.content {
      			width: 34em;
      			min-width: 372px;
      			font-family: 'Source Sans Pro','Helvtica','Arial', 'san-serif';
      			background-color: green;
      			padding-top: 10px;
      			padding-bottom: 300px;
      			border-radius: 100px;
      			top: 5%;
      			left: 50%;
      			border: 5px solid #666;
      		}
      	</style>-->
      	<script type="text/javascript">
      		window.onload = function() {
      			resize();
      			var target = document.getElementById('page:content');
      			var config = { attributes: true, childList: true, characterData: true, subtree: true }
      			var observer = new MutationObserver(function(mutations) {
      				mutations.forEach(function(mutation) {
      					resize();
      				});
      			});
      			observer.observe(target, config);
      		}
      
      		window.onresize = function(event) {
      			resize();
      		};
      
      		function resize() {
      			footer = document.getElementsByClassName("footer")[0];
      			body = document.body;
      
      			if (window.innerHeight < body.scrollHeight + footer.scrollHeight) {
      				footer.style.position = "relative";
      			}
      			if (window.innerHeight >= body.scrollHeight) {
      				footer.style.position = "absolute";
      			}
      		}
      	</script>
      </apex:page>
      						   


    • Upload your logo
      • Go to Setup > Develop > Static Resources
      • Upload your logo to Static Resources
      • Change the sample logo {(!$Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')} to {!$Resource.YourLogo}
      • Change AppFrontier address and contact information to your own company contact info
      • Customize other aspects of the design per your organization's requirements

    • Complete the steps above for the other Payment Request pages:
      • Fail
      • Cancel
      • PaymentRequest
      • NOTE: PaymentRequest needs to be created last, since it references the other 3 pages

  4. Configure your Force.com sites page.

    • Create a Domain if you do not have one already (eg. MyCompany.Force.com)
    • 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

     

    Create a Payment Request Site


    • Under the section “Site Visualforce Pages" click Edit.
    • Add access to the Fail, Success, Cancel and PaymentRequest pages as well as ChargentBase.TChargentApiHelper

     

    Enable Site Visualforce Pages


  5. Assign Chargent License to Guest User

    • Every Force.com site has an associated guest user
    • Go to Site > Public Access Settings > Assigned Users
    • Click on Site Guest User under the Full Name column
    • Scroll down to the "Managed Packages" related list, there you will find and click the "Assign Licenses" button (in center when you scroll down) and choose Chargent Orders, Cases or Opportunities (depending on which Transaction package you have installed.

     

    Payment Request Guest User


    Create a Payment Request Site


  6. Apply a Permission Set to the Site Guest User

    • Open the Site Guest User view page

      • Go to Setup > Develop > Sites

      • Select a Payment Request Site


      • Select an Active Site

      • Click the [Public Access Settings] button

      • Select Public Access Settings


      • Click the [View Users] button

      • Select the Guest User used in this site

    • Apply the Permission Set to Site Guest User

      • Click the [Edit Assignments] button in Permission Set Assignments related list

      • Edit Permission Set Assignments


      • Select two permission sets: Permission Set for Payment Request (Base) and Permission Set for Payment Request (SFA/Orders/Cases)

      • Select Permission Sets


      • Apply changes


    • Configure Payment Request Feature

      • Go to Setup > Develop > Sites

      • Copy the Site URL

      • Select Pay Request Site URL


      • Go to Advanced Settings in Chargent Settings

      • Insert the URL in the "Salesforce Sites Page (URL)" field


      • Select Pay Request Site URL


      • Apply changes

  7. Configure other Payment Request Settings

    • Go to the Chargent Settings tab
    • Click on the Advanced Settings sub-tab
    • Under the Payment Request section on the left, configure the fields as follows:

    • Automatically Create PR Record
      Checking this box will have Chargent create a new Payment Request record for each new Opportunity, Chargent Order, or Case record that is created. This is used when you want to use the Pay Link in certain automated emails or invoices. Leave unchecked as a default.

    • Show Debug
      If this option checked result message will include debug information like response from gateway. For testing only, should NEVER be enabled when customers are using your payment forms.

    • Payment Confirmation Text
      Displays a confirmation message to customer after successful payment. Leave default or customize the text as you wish.

    • Payment Error Text
      Displays a confirmation message to customer after failed payment. Leave default or customize the text as you wish.

    • Payment Request Confirmation Text
      Displays message to Salesforce user when a Payment Request is successfully sent. Leave default or customize the text as you wish.

    • Payment Link Expiration Hours (Number)
      Set the number of hours you would like an individual payment request link to be active. You can choose any number from 1 to 17520. The default is 17520 hours, which is 2 years.

    • Salesforce Sites Page (URL)
      • Go to your Setup > Develop > Sites
      • If you are in sandbox or development org, you will only see one option.
      • If you are in production, you will see two. Use the secure one only! The secure version will be https://yourdomain.secure.force.com
      • Right click and copy the URL, and paste into this field. Paste secure version of URL in SFDC Sites Page field

    • Error Page (URL)
      This URL is where the Payment Request user is sent if their card fails. You can leave this blank and it will go to the fail page you set up before. Or you can put an external URL and customers will go there. A third option is to insert the parameters into the pay request URL. This is an advanced feature, so see the customization section below for details.

    • Thank You Page (URL)
      This is the URL that the user is sent to when they get a successful charge. You can leave this blank and it will go to the success page you set up before. Or you can put an external URL and customers will go there. A third option is to insert the parameters into the pay request URL. This is an advanced feature, so see the customization section below for details .


     

    Chargent Settings Tab with Payment Request options


  8. Update the Page Layout

    • Update the Opportunity, Case or Chargent Order Page Layout (recent installs of Chargent Orders will already be configured as this is a custom object)
    • Add Payment Requests Related List
    • Add Send Pay Request Button

     

    Add Payment Request button to Page Layout


  9. Create a Public Group and Sharing Rule

    (This will allow the guest user to see the parent records that will be updated by Payment Requests)

    • Go to Setup > Public Groups
      • Create new Public Group called Guest User
      • Add "Payments Site Guest User" and any internal Salesforce users who owns the Chargent Order, that might have payment requests to the Group

       

      Create a Payment Request Public Group


    • Go to Setup > Sharing Settings
      • Create New Sharing Rule
      • Read / Write Sharing Rule for the Chargent Order that includes the Guest user for Sites and anyone that is sending Payment Request notifications.
      • Chargent Order Access = Public Read/Write

     

    Create a Payment Request Sharing Rule


  10. Final Setup Steps

    • Go to the Gateways tab and check to make sure that you have selected the types of cards you wish to accept in the Available Card Types field (Visa, MasterCard, etc.)

    • Customize the Payment Request email template

      • Go to MySettings > Email > Email Templates > Chargent Templates
      • Edit the Payment Request template like any standard email template

      • You can also create a new template using your own letterhead or custom HTML or visualforce. To do this, edit the workflow action Payment Request email alert that is part of the Payment Request Email workflow rule.

    • Send yourself some test Payment Requests and run some test transactions, fails, cancels, etc.

 

How to Send a Payment Request

  1. Click the Send Payment Request button in the Chargent Anywhere Lightning component

  2. Click the Contact picklist to choose the contact to which you’re sending the request (You may also manually enter an email address in the Recipient Email Address field instead).

  3. Enter the Request Amount

  4. Enter the Payment Request Type: You have 3 types of Payment Request Types

    • Charge Full Amount - This will charge the total of the Payment Request
    • Authorize Full Amount - This creates an authorization only and does not charge the transaction
    • Authorize Minimum - This will only authorize the minimum amount your gateway will allow (this is generally $1.00)

  5. Enter optional info in the Request Notes (These are notes the recipient of this Payment Request will see in the email they receive)

  6. Click the Send Request button


send payment

Here is the email that the customer will receive showing the link to make their payment (fully customizable Salesforce email template).

link

The payment link takes them to a secure payment page, where their contact information and the amount is already populated. The customer simply has to enter their credit card, CSC (Card Security Code), and Expiration Date then press Charge.

credit card

The Payment Request will create the following records in your Salesforce Org:

  • Chargent Order - the Chargent Order acts as a payment source for the transaction. Its where the token will be stored for future payments and recurring billing.
  • Chargent Payment Request - the Payment Request object consists of all Payment Requests for all transactions. Each payment request generated is associated with a Chargent Order.
  • Transaction - Once the Payment Request is completed and payment has been made a transaction record is created showing the payment and associating the transaction back to the Chargent Order.

Once the Payment Request is paid, the Status field will change from Created to Paid.


chargent

For more information on setting up and configuring the Payment Request feature check our complete documentation on Chargent Anywhere.


 

Developer Guide for Payment Request


Please note that this documentation is designed for experienced Salesforce developers and implementation firms. Chargent support can help if you have questions related to the functioning of Chargent, but is unable to assist with troubleshooting code or the implementation of these customizations.


Payment Request pages

Currently we have two ways of working with Payment Request:

  • SitePayment visualforce page
  • SitePaymentComponent visualforce component

If the development doesn’t require the need to integrate Payment Request form into their own pages they can simply use SitePayment page. It has default Chargent styling and visible Billing Address section (see below).

If a developer wants to integrate Payment Request form into their own page or update the default styling or have an ability to disable Billing information - SitePaymentComponent is what should be used.

Chargent Payment Request Default Site

Payment Request configuration

All of the Payment Request feature settings can be found on Chargent Settings page.

Go to Chargent Settings -> Advanced Settings -> Payment Request section. Here you’ll find all the settings that can be applied to Payment Request feature:

  • Automatically Create PR Record - Checking this box will have Chargent create a new Payment Request record for each new Opportunity, Chargent Order, or Case record that is created. This is used when you want to use the Pay Link in certain automated emails or invoices.

  • Show Debug - For testing purposes only, NEVER ENABLE DEBUG MODE when customers are using your payment forms. When this option is checked the result message will include debug information including the entire response from the gateway.

  • Accept eCheck - If this field is set to TRUE users of your Payment Request page will be able to choose to use an eCheck to pay the amount due.

  • Payment Confirmation Text - This is the text that is displayed to the customer after successful payment.

  • Payment Error Text - This is the text that is displayed when there is an error message given to the user entering payment data after failed payment.

  • Payment Request Confirmation Text - Displays a message to the Salesforce user when a Payment Request is successfully sent.

  • Payment Link Expiration Hours (Number) - Set the number of hours you would like an individual payment request link to be valid. You can choose any number from 0 (no expiration) to 17520 hours (2 years).

  • Salesforce Sites Page (URL) - This is the URL to the SitePayment page on your configured Salesforce site.

  • Error Page (URL) - This URL is where your customer is sent if their card fails.

  • Thank You Page (URL) - This is the URL that your customer is sent to when they get a successful charge.

Also there is configuration field on Gateway object Available PR Transaction Types with the following values:

  • Charge Full Amount/none will send the total value as an auth and capture
  • Authorize Full Amount will send the total value as a preauth. aka auth only
  • Authorize Minimum Amount will send a $0.00, $0.01 or $1 whichever is allowed by the card network/gateway



Customizing the design of your
Payment Request page

To customize the look and feel of your Payment Request page, you can either customize the sample pages provided as part of Chargent in Step 3 above, or create your own Visualforce pages.

Chargent's SitePayment visualforce component can also be dropped into your visualforce pages any time you need to take a payment, such as ecommerce systems or customer communities.

Chargent Payment Request Default Site

Default Visualforce page SitePayment (prior to customization of surrounding PaymentRequest page).

To create your own Visualforce page from scratch, you will need to include the SitePayment page as a component. This is because the SitePayment page is part of the Chargent managed package, so it can't be edited directly. To include it in your own Visualforce page, use the following code:

  <ChargentOrders:SitePaymentComponent />
Legacy packages:
  <ChargentCases:SitePaymentComponent />
or
  <ChargentSFA:SitePaymentComponent />

To make sure that your CSS styles will override the Chargent CSS, you just need to put your styles right after the component in your page that uses the Chargent Site Payment Component. Note that you may need to include the standard CSS stylesheets unless you are handling that on your own:

Code sample:

<apex:page showHeader="false" standardStylesheets="true">
  <!-- HEADER -->
  <ChargentOrders:SitePaymentComponent />
  <!-- FOOTER -->

  <!-- OVERRIDE CSS LOCATION -->
   <style type="text/css">
    .content {
      width: 34em;
      min-width: 372px;
      font-family: 'Source Sans Pro','Helvtica','Arial', 'san-serif';
      background-color: green;
      padding-top: 10px;
      padding-bottom: 300px;
      border-radius: 100px;
      top: 5%;
      left: 50%;
      border: 5px solid #666;
   }
  </style>
</apex:page>

The CSS styles used by default are found in style.css and in componentStyle.css.

The following classes are the primary ones in our Site Payment Component:

  • .content
  • .message
  • .formHeader
  • .link
  • .info
  • .paidmsg

A full list of classes are found in componentStyle.css

This is an example of using a custom page prior to passing the user to the Chargent Payment Request Page. It has been simplified for demonstration purposes.

Initial Page

<apex:page controller="myController">
  <apex:form>
  <apex:commandButton value="Submit Page" action="{!myMethod}"/>
  </apex:form>
</apex:page>

Initial Controller

public class renewal_Controller{

  private string req_param;

  public pageReference myMethod(){
    req_param = apexPages.currentPage().getParameters().get('req'); 
    Pagereference pr = Page.{YOURPAGENAME};
    pr.getParameters().put('req',req_param);
    return pr; 
  }
}

In the above example, in the Salesforce Force.com site settings, you configure your site's Active Site Home Page to be the Initial Page above. If the Payment Request configuration is properly completed when a Payment Request link is generated it should be similar to:

https://mydomain.secure.force.com/initialpagename?req=xxxxxxxxx

When the user clicks on the button on the initial page it will call the method in the controller. That method will then get the req parameter, create a new pagereference to the second page, append the req parameter to that reference and redirect the user to that page.

On the second page, include the

<ChargentOrders:SitePaymentComponent />

on that page where you want it. The component will automatically get the req parameter from the url.

With Payment Request you can define the pages (URLs) that your web visitors are sent to in certain situations. To control where users are sent when the Cancel button is pushed, set the Cancel attribute. To control where a user is sent upon a successful payment set the Success attribute. To control where the user goes if there was an error or decline set the error attribute.

NOTE: You can either set these when you call the payment request component OR you can set these values in the Chargent Settings. The attributes sent in the URL as attributes will override the values in the Chargent Settings for the same attribute.

The component has the below 3 attributes:

  • cancel
  • success
  • fail

Here is a code snippet to help you set it up:

<apex:page >
<ChargentOrders:SitePaymentComponent showAddress="true" cancel="http://cancel-url" success="http://success-url" fail="http://fail-url"/>
</apex:page>

NOTE: You will need to replace the success-URL, fail-url and cancel-url with your actual URL. e.g., https://chargent.secure.force.com/payrequest


SitePayment page

The SitePayment page will accept these URL parameters:

  • req - encrypted string containing all necessary internal attributes for PR
  • successURL - redirect this URL on success result
  • cancelURL - redirect to this URL on click Cancel button
  • failURL - redirect to this URL on failed result
  • pid - parent record id (Opportunity/Order/Case) used to refer to the record that the request was sent from

Payment_Request__c pr = new Payment_Request__c(
  Email_Address__c = 'email@test.com',
   Billing_Contact__c = contact.Id,
  Opportunity__c = objId,
   Send_Payment_Request_Email__c = true,
   Status__c = 'Created',
   Notes__c = 'Notes',
   Include_Parent_ID__c = true
);
insert pr;

URL example

https://chargentdev.na40.visual.force.com/apex/SitePayment?req=I1xi4R4rnagItaGPtIaASE6PncIp%2BiwMiPMzX1y1ddBL%2FN%2F4iAqsvML6oReuS9V3eSBO%2Bzd9nzmG%2BHnDPEj9BJAKZxncl440iigC%2B3FiCKA%3D&successURL=/apex/SuccessPage&failURL=/apex/FailPage&cancelURL=/apex/CancelPage

Note: you can use either relative or absolute URLs as parameters.


SitePaymentComponent component

The SitePaymentComponent accepts the following component parameters:

  • showAddress - Boolean value that render Billing Address section
  • success - redirect this URL on success result
  • cancel - redirect to this URL on click Cancel button
  • fail - redirect to this URL on failed result


Component page example

<apex:page id="PaymentRequestPage" showHeader="false" sideBar="false" docType="html-5.0">
   <div class="container">
     <apex:outputPanel id="content" layout="block" >
       <!-- You may use some parameters with SitePaymentComponent: -->
       <!-- 1. showAddress - Boolean value to render the billing address section -->
       <!-- 2. cancel - Cancel page URL -->
       <!-- 3. success - Success page URL -->
       <!-- 4. fail - Fail page URL -->
       <div class="panel-body scroll-panel-2 ">
         <c:SitePaymentComponent showAddress="true" cancel="/apex/cancel" success="/apex/success" fail="/apex/fail"/>
       </div>
     </apex:outputPanel>
   </div>
</apex:page>

Note: you can use either relative or absolute URLs as parameters.


Auto-Expand the Billing Contact Section

Some customers would like the billing contact details section expanded the first time a customer sees the payment request page.

One can make the address section auto expand when the payment request page is loaded by adding the follow JS to the page.

<script>   window.onload = function(){     $("a:contains('Update Billing')").trigger('click');   }; </script>


Other Resources

For an overview on how to build a Force.com Site page that collects information from a visitor, prior to presenting them with the payment request page, please see our Custom Landing Page with Payment Request documentation.

That doc gives you a starting point on getting the landing page in front of the payment request and the code required to generate the records necessary to create and redirect to the payment request page once the prior actions are completed.