Flow-Enabled Take Payment Component

Overview

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

Prerequisites:

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

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

Creating the Take Payment Flow

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

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

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

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

Add the Screen Element for Take Payments.

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

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

Configured using the Chargent Order Object

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

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

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

Activate Your Flow

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

1. On the dropdown menu to the right of the Take Payments Flow, select ‘View Details and Versions’
   
   
2. Click ‘Activate’ next to the verison you want to activate the Flow

Adding the Take Payments Flow to your Page 

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

Using Flow-Variables as Input Configuration

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

1. Add the Get Records Element

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

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

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

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

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

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