Take Payment – Payment Completion Event

The Payment Completion (aka paymentcompletion) Custom Event was built for the Take Payment Component to provide developers a lightning event that indicates that a payment attempt has been completed. This event will dispatch not only when payment results in a successful charge, but also in error scenarios (except for a few exceptions).

When is the event fired? #

The paymentcompletion event will always (apart from a few exceptions) fire after users click on the Pay button located in the Take Payment Component.

From a technical point of view, this means the custom event will be fired during or after the Chargent Order record update or the Charge/Authorization that are triggered right after the Pay button is clicked.

Event Detail #

“paymentcompletion” is the official name of this custom event, and these are its properties that come in its detail:

Property	Description
transactionId	Id of transaction (if created)
message	Information message describing the result of the operation (e.g. “An error occurred while updating the Order”)
result	“success” when Chargent Order Update and Charge are completed successfully. “error” in all other scenarios.

This is an example of the “paymentcompletion” event detail that results from a successful payment/charge:

JavaScript
{
    "transactionId": "0000000000000",
    "message": "Your transaction was successfully approved.",
    "result": "success"
}

This is an example of the “paymentcompletion” event detail that results from an unsuccessful payment/charge:

JavaScript
{
    "transactionId": null,
    "message": "There is more than one active gateway configured...",
    "result": "error"
}

Use Case Example #

Since Take Payment is an LWC, it can be implemented inside another LWC. In this way, and thanks to this new paymentcompletion event functionality, the LWC that contains the Take Payment component will be able to dispatch the event whenever the payment has concluded. For this example, a LWC (parentComponent) that contains the Take Payment Component will listen for the paymentcompletion event and handle the response from its child component.

This example was designed based on the “Passing Information Up” section included in the “Handle Events in Lightning Web Components” unit from the Lightning Web Component Basics Module in Trailhead.

Name: parentComponent.html

C/C++
<template>
    <chargentbase-chargent-take-payment
        record-id={orderId}
        the-gateway-id={gatewayId}
        amount-field-name={amount}
        onpaymentcompletion={handleCustomEvent}>
    </chargentbase-chargent-take-payment>
</template>

The parentComponent is handling the paymentcompletion event by implementing an inline event handler (onpaymentcompletion={handleCustomEvent}). Additionally, three mandatory properties of the Take Payment component are being set to make it work.

Name: parentComponent.js

JavaScript
import { api, LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    @api orderId = "theOrderId";
    @api gatewayId = "theGatewayId";
    @api amount = 100; // Desired amount to be charged

    handleCustomEvent(event){
		transactionId = event.detail.transactionId;
		message = event.detail.message;
		result = event.detail.result;
        if (result === "success") {
			// Logic when successful Charge
        } else {
			// Logic when not successful Charge
        }
    }
}

Exception Scenarios #

The paymentcompletion event will not fire in this known scenario:

When payment information (such as credit card or bank account data) is missing. A validation that checks all payment information is run before the rest of the processes, and a toast message will be displayed indicating that information is missing (image below). The event is not triggered in this scenario.

NOTE: This additional functionality (paymentcompletion event) does not change the existing functionalities of Take Payment Component.