Flow Screen Charge Component

The Flow Screen Charge component (PaymentChargeFlow) creates a Payment Method and charge Transaction with clicks, not code. This flow component can be configured for internal or customer-facing scenarios and used with standard or custom objects.

Create a Flow

1. Before you begin, please determine the Parent object for the Transaction (Charge) object. (The Parent object was configured in the Payments Setup Wizard.) For this example, we will use the Opportunity object as our Transaction Parent.
2. Click the Gear icon
3. Click Setup.
4. In the Quick Find box, search for and click "Flows."
5. Click New Flow.
   
6. Select "Screen Flow" and click Create.
   

Create a Get Records Element

1. Click the + symbol (Add Element) between the Start and End elements.
   
2. Under Data, select Get Records.
3. Fill in the following fields. This step quieries the Opportunity for the fields you want to pass into the PaymentChargeFlow component. If you unfamiliar configuring the Get Records step, please review the Flow Trailhead modules.
   • Label (required)
   • Object (required)
   • Field (required)
     
4. Review the additional options.
5. Close the Get Records window.

Create an "Enter Card" Screen Element

1. Click the + symbol (Add Element) between the Get Records and End elements.
   
2. Under Interaction, select Screen.
3. Enter a Label. (required) (In this example, we used “Enter Card.”)
4. Un-check the Show Header field since the component already contains a header.
5. Review the footer configurations.
6. Under the Components tab, locate the PaymentChargeFlow component and drag and drop it on the new screen.
7. Fill in the required fields.
   • API Name
   • Is For Customer
     
8. Complete the optional fields as needed. To learn more about each field, hover over each help icon. Values entered such as Currency= “USD” can be hard-coded. Or they can be mapped from fields such as {!opp_record.Amount} on the Transaction Parent (the Opportunity in this example). NOTE: Most fields may default to values if not set.
   • Payment Gateway Id
   • Amount To Charge
   • Currency
   • Charge Description
   • Charge Parent Id
   • Account Id
   • Contact Id
   • Input and Output - Payment Method Id
   • Input and Output - Transaction Id
     

Create a PaymentMethodId Field

1. Click the Fields tab.
2. Click in the Record Variables field and click + New Resource.
3. Fill in the following fields.
   • API Name = “PaymentMethodId” (required)
   • Data Type = “Text” (required)
   • Available for input = “True” (checked)
   • Available for output = “True” (checked)
     
4. Click Done.

Create a TransactionId Field

1. Click the Fields tab.
2. Click in the Record Variables field and click + New Resource.
3. Fill in the following fields.
   • API Name = “TransactionId” (required
   • Data Type = “Text” (required
   • Available for input = “True” (checked
   • Available for output = “True” (checked)
     
4. Click Done.

Configure the Advanced Settings

1. Click the + symbol (Add Element) between the PaymentChargeFlow component and open the Advanced section.
2. Check the Manually Assign Variables checkbox.
3. Set Input and Output - Payment Method Id = “{!PaymentMethodId]" and Input and Output - Transaction Id = “{!TransactionId}." You must enter values in these fields so the multi-step flow will know if the Payment Charge step has been completed when a user clicks the Previous button. Entering values in these fields now also makes it easy to obtain the newly created Payment Method ID and Transaction ID if you need either later in the flow.
   
4. Click Done.
   

Create a "Results" Screen Element

1. Click the + symbol (Add Element) between the Payment Flow screen and the End.
2. Enter a Label. (required) (In this example, we used “Results.”)
3. Un-check the Show Header field since the component already contains a header.
4. Review the footer configurations.
5. Click Done.
   

Save Your Flow

1. Click Save.
   
2. Enter a Flow Label.
3. Click the Advanced section and set Type = “Screen Flow.”
4. Click Save.
5. Run, test, and activate the flow before using it.

Edit the Parent Object Page Layout

1. Open the Parent Object record. In this case, it’s the Opportunity.
2. Click Setup.
3. Click Edit Page.
4. Select the Flow component and drag and drop it to a narrow column on the page layout. If you have multiple Flows defined in Salesforce, select the name of the Flow you just created in the Flow field.
5. Ensure the Pass record ID into this variable checkbox is checked.
   
6. Click Save.
7. Navigate back to the Parent Object (Opportunity) record and try it out. Depending on how you've configured the PaymentChargeFlow component, it should look like one of the following images.
   • For customer-facing users
     
   • For internal Salesforce users
     

Authorize.net Payment Gateway Configuration

New Fields

• Object: Payment Gateway
  • Field Label: Live Validation Mode (Authorize.net)
  • API Name: Live_Validation_Mode__c
  • Data Type: checkbox
  • Default Value: False (unchecked)
  • Description: 
    • If checked, the Payment Method will use the "liveMode" to submit a zero-dollar or one-cent Transaction (depending on the card type and the processor support) to confirm the card number belongs to an active credit or debit account. 
    • If unchecked, the Payment Method will use the "testMode" to perform a Luhn mod-10 check on the card number, without further validation.
• Component: PaymentChargeFlow 
  • Field: Show Address 
  • Description: When enabled, additional address fields (Street, City, State, and Country) will be visible and required. Click here for more information about adding fields.

Instructions

1. To enable CVV validations when using an Authorize.net gateway and the PaymentChargeFlow component, check the new Live Validation Mode (Authorize.net) field on the Payment Gateway record and add the Show Address field to the PaymentChargeFlow component.  
2. When both are enabled, additional address fields (Street, City, State, and Country) will be visible and required, and the validation process will occur.