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 the Related To field.
• sObjectName - This is the object type for the Related To field.
• parentObjectName - This the the name of the object used in the Parent Object field.
• parentId - This the is id associated with the record populated in the Parent Object field.
• customRedirect - Accepts values of true or false. Must be set to true in order to stop the default success popup.
• disableCard - Accepts values of true or false. When set to true the credit card form will NOT be displayed on the New Payment Method screen. Users will not see the credit card form on the + Add New option when clicking the Payment 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 of true or false. When set to true the ACH form will NOT be displayed on the New Payment Method screen. Users will not see the ACH form on the + Add New option when clicking the Payment 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:

1. Create a Lightning Component using the Developer Console

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

3. In the .cmp add the following code, but replace recordId and parentId 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>

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

5. Save your file.
6. Navigate to a record page where you would like this custom component to live (ex: Invoice)
7. Use the page editor to drag your custom component onto the page.

8. Save your changes

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