Component Flexibility
Some customers have expressed the need to have a little more flexibility with the Virtual Terminal. To address this need users can create their own Aura component and add it where they see fit. Inside the Aura component the user can pass in the following variables:
recordId
- This is the record id that will populate theRelated To
field.sObjectName
- This is the object type for theRelated To
field.parentObjectName
- This the the name of the object used in theParent Object
field.parentId
- This the is id associated with the record populated in theParent Object
field.customRedirect
- Accepts values oftrue
orfalse
. Must be set totrue
in order to stop the default success popup.disableCard
- Accepts values oftrue
orfalse
. When set totrue
the credit card form will NOT be displayed on theNew Payment Method
screen. Users will not see the credit card form on the+ Add New
option when clicking thePayment Method
field. Additionally, the stored Payment Methods with the Record Type = Card will not display as a Payment Method that can be used for capturing Transactions.disableACH
- Accepts values oftrue
orfalse
. When set totrue
the ACH form will NOT be displayed on theNew Payment Method
screen. Users will not see the ACH form on the+ Add New
option when clicking thePayment Method
field. Additionally, the stored Payment Methods with the Record Type = ACH will not display as a Payment Method that can be used for capturing Transactions.
Custom Component Scenario:
- Create a Lightning Component using the Developer Console


- Add a
Name
, selectLightning Page
andLightning Record Page
in the Component Configuration section, and clickSubmit


- In the .cmp add the following code, but replace
recordId
andparentId
with IDs from your org
<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>
- Add a controller.js file if you would like to add an event handler.
({
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);
}
})
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.
- Save your file.
- Navigate to a record page where you would like this custom component to live (ex: Invoice)
- Use the page editor to drag your custom component onto the page.


- Save your changes
Now you'll have a bit more flexibility using your own custom component.
Updated 4 months ago
Did this page help you?