Custom Component Scenario
  • 20 Feb 2024
  • 1 Minute to read
  • Dark
    Light

Custom Component Scenario

  • Dark
    Light

Article summary

  1. Create a Lightning Component using the Developer Console.
    Custom Component Scenario_1

  2. Add a Name, select "Lightning Page" and "Lightning Record Page" in the Component Configuration section, and click Submit.
    Custom Component Scenario_2

  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

  4. Click Save.

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