Flow Screen Charge Component
  • 13 Jul 2022
  • 3 Minutes to read
  • Dark

Flow Screen Charge Component

  • Dark

Unpopular Feature

It works as-is, we won't be adding functionality to this as most customers have opted for using a client-side javascript approach for tokenization with our REST API if they do something custom like this. It's a technical limitation of Salesforce that doesn't allow us to do client-side js injection in a component like this, which is a more secure form of PCI compliance.

Our Lightning Flow component creates a Payment Method and Charge Transaction with clicks not code. This Flow component can be configured for internal or customer facing scenarios and can be used with any standard or custom object.

Setup Instructions

  1. Determine the Parent object to the Transaction (Charge) object - this is configured in the Payments Setup Wizard. For this example, we have the Opportunity object as our Transaction Parent.

  2. Create a new Flow in Salesforce - you can go to Setup and search for Flow. When you save the Flow, you'll select "Screen Flow" for the Type field. A simple Opportunity Screen Flow may look like this:
    H_02_24_Setup 1

  3. The Get Records step will query the Opportunity for fields you'll want to pass into our PaymentChargeFlow Lightning Component. If you don't know how to configure a Get Records step you may want to complete some Flow Trailhead modules.

  4. To add our PaymentChargeFlow Lightning Component to the flow, drag a Screen element onto your flow. Then search components for the PaymentChargeFlow and drag it onto the screen. It's recommended that this be the only functional code on this screen. We also recommend you un-check the Show Header box - the component already contains a Header. Once you click on the component, you'll see a configuration screen on the right side that looks like this:
    H_02_24_Setup 2

  5. Complete the Flow Configuration. The fields listed are optional inputs into the PaymentChargeFlow Lightning Component. To learn more about each input, hover over the help icon to the right of each field. Values passed in can be hard-coded such as USD for Currency or can mapped from fields on the Opportunity (the Transaction Parent) such as {!opp_record.Amount}. Most fields are optional and may default to values if not set.

  6. The Input and Output - Payment Method Id and Input and Output - Transaction Id fields should be set in both the input section at the top and in the Store Output Values section at the very bottom of the configuration section. These fields need to be set so a multi step flow will know if the Payment Charge step has been completed in case a user clicks the Previous button. It is also an easy way to get the Id of the newly created Payment Method and Transaction out of the flow step in case you need to use it later in the flow.
    H_02_24_Setup 3

{!PaymentMethodId} and {!TransactionId} are simple Flow Variables that you'll need to create. They need to be configure like this:
H_02_24_Setup 4

  1. Once the Flow is complete, connect all the Steps, Save it and Activate it.

  2. Next, Edit the Lightning Opportunity Page in the App Builder. When viewing an Opportunity record, you can click the Edit Page link in the Setup menu. Select the Flow component and drag it to a narrow column on the Page Layout. If you have multiple Flows defined in Salesforce you will have the select the name of the Flow you just created in the Flow field. Also make sure the Pass record ID into this variable checkbox is checked like below:
    H_02_24_Setup 5

  3. Save the Lightning Page. Then navigate to an Opportunity record and try it out. Depending on how the Lightning Flow component is configured, is should look something like this if configured to be customer facing:
    H_02_24_Setup 6

Or like this if it's configured for internal Salesforce users:
H_02_24_Setup 7

Happy charging!