Developer Pages for Payment Request

Chargent’s Payment Request feature allows you to create your payment site pages in two different ways.

• Use the Chargent Custom Pages tool within the Chargent App (recommended)
• Use custom Developer Pages

Developer Pages allow you to use existing or new Visualforce Pages to employ custom code or functionality to your Payment Requests. If you choose to use Developer Pages for Payment Request, this section will outline how to create and prepare those pages.

Note: Developer Pages is a pro-code solution recommended only for experienced Salesforce Developers.

Before You Begin #

Before you begin, see the following useful links:

• Use Lightning Components in Visualforce Pages
• Using <apex:slds />

Using 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:[email protected]” styleClass=”maillink”>[email protected]</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 <!– in front of and –> 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 the 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.

Adyen customers using SCA and Payment Request Developer Pages need to add the following parameters to the above code for the redirect to the Payment Request form to work properly.

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.

Configuring Chargent Payment Request #

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 Developer Pages #

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

1. Navigate to Setup > Sites & Domains > Sites
2. Click Edit 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 the Payment Request
5. Click Save

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:

Active Site HomepagePlacing your custom page here means that anyone who accesses the site URL will be presented with your custom Payment Request pageAvailable Visualforce PagesPlacing 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 “Developer” setting to Enabled in the Payment Request Setup Wizard.

6. Click the App Launcher icon at the top-left of your screen, then click the “Chargent” app
7. Click the “Chargent Settings” tab
8. Click the “Payment Request Setup” tab
9. Click Next to navigate to the Layout page of the wizard
10. Click the toggle switch for Use Custom Page
11. Click Next, then click Finish

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.

Example 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>