---
title: "Custom Component Scenario"
slug: "vt-custom-component-scenario"
updated: 2026-02-04T15:36:47Z
published: 2026-02-04T15:36:47Z
canonical: "docs.blackthorn.io/vt-custom-component-scenario"
---

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

# Custom Component Scenario

> [!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.

1. Create a Lightning Component using the Developer Console. ![Custom Component Scenario_1](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/Custom%20Component%20Scenario_1.png)
2. Add a **Name**, select "Lightning Page" and "Lightning Record Page" in the Component Configuration section, and click **Submit**. ![Custom Component Scenario_2](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/Custom%20Component%20Scenario_2.png)
3. In the .cmp, add the following code, but replace the recordId and parentId with IDs from your org.

**BT Payments Virtual Terminal Custom Component Sample**

```
`<aura:component                         implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
            force:hasRecordId" access="global" >
  <aura:handler name="chargeTransaction" event="bt_stripe:chargeTransaction"                        action="{!c.handleEvent}"/>
    <bt_stripe:VirtualTerminal recordId="0035400000ewEgvAAE"
                sObjectName="Contact"
        parentObjName="bt_stripe__sales_document__c"
                parentId="a0V540000020e7LEAQ"
            disableACH="true">
    </bt_stripe:VirtualTerminal>
</aura:component>`
```

1. Add a controller.js file if you would like to add an event handler.

**Controller.js**

```
`({
    handleEvent : function(component, event, helper) {
                    var success = event.getParam("success");
            var errorMessage = event.getParam("errorMessage");
            var transactionId = event.getParam("transactionId");
            console.log (' success ' , success);
            console.log (' errorMessage ' , errorMessage);
            console.log (' transactionId ' , transactionId);
    }
})`
```

NOTE

Adding a javascript file like the one above can allow customers to pass in variables that can be used in flows to meet the needs of a business requirement.

1. Save your file.
2. Navigate to the record page where you want this custom component to live. (ex: Invoice)
3. Use the page editor to drag your custom component onto the page. ![Custom Component Scenario_3](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/Custom%20Component%20Scenario_3.png)
4. Click **Save**.

Now you'll have more flexibility when using your own custom component.