---
title: "Flow Screen Charge Component"
slug: "flow-screen-charge-component"
tags: ["Payments"]
updated: 2026-02-04T15:34:48Z
published: 2026-02-04T15:34:48Z
canonical: "docs.blackthorn.io/flow-screen-charge-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blackthorn.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow Screen Charge Component

> [!WARNING]
> Coming in 2026: Deprecation of Aura Virtual Terminal Component
> 
> New Virtual Terminal configurations should utilize our modern and feature-rich Lightning Web Component version. We plan to sunset the Aura Component and related Flow Screen Charge Component in 2026.
> 
> 
> 
> Don’t worry! Customers will receive advance notice of the sunset date to ensure a smooth transition.

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**. ![PaymentChargeFlow_ClickNewFlow](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_ClickNewFlow.png)
6. Select "Screen Flow" and click **Create**. ![PaymentChargeFlow_ScreenFlow_ClickCreate](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_ScreenFlow_ClickCreate.png)

### Create a Get Records Element

1. Click the **+ symbol** (Add Element) between the Start and End elements. ![PaymentChargeFlow_ClickPlusSign](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_ClickPlusSign.png)
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](https://trailhead.salesforce.com/en/content/learn/trails/automate_business_processes).
  - **Label** (required)
  - **Object** (required)
  - **Field** (required) ![PaymentChargeFlow_GetRecords](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_GetRecords.png)
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. ![PaymentChargeFlow_AddElement](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_AddElement.png)
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** ![PaymentChargeFlow_RequiredFields](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_RequiredFields.png)
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** ![H_02_24_Setup 2](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/image-1717682991373.png)

#### 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) ![PaymentChargeFlow_PaymentMethodId](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_PaymentMethodId.png)
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) ![PaymentChargeFlow_TransactionId](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_TransactionId.png)
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. ![H_02_24_Setup 3](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/H_02_24_Setup%203.png)
4. Click **Done**. ![PaymentChargeFlow_AddResults](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_AddResults.png)

### 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**. ![PaymentChargeFlow_Save](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_Save.png)

### Save Your Flow

1. Click **Save**. ![PaymentChargeFlow_SaveTheFlow](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/PaymentChargeFlow_SaveTheFlow.png)
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. ![H_02_24_Setup 5](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/H_02_24_Setup%205.png)
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 ![H_02_24_Setup 6](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/H_02_24_Setup%206.png)
  - For internal Salesforce users ![H_02_24_Setup 7](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/H_02_24_Setup%207.png)

## Authorize.net Payment Gateway Configuration

PREREQUISITE

You must be an Authorize.net user to use the following fields. *Do not use these fields for any other scenarios. It will cause Transactions to fail.*

This update is a work in progress, and support for CVV and address validation for other features will occur in future updates.

### 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.