8. Handling Callbacks from Web-Components

Events are our way of letting you know when something interesting happens in web-components.

The pay-engine web-component is a DOM element that provides various events to which you can attach listeners to in your client side code. For specific events, please refer to following document:

• Onboarding web-component

To attach an event handler to web-component, you'll need to call addEventListener on your desired web-component element.

<pay-engine id="onboarding" merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" type="boarding"></pay-engine>

<script type="application/javascript">
    document.getElementById('onboarding').addEventListener('stepChange', function(e) {
        console.log(e.detail)
    })
    document.getElementById('onboarding').addEventListener('submitted', function(e) {
        console.log(e.detail)
    })
</script>

Below you'll find some equivalent examples in other popular frameworks.

React

function MyComponent() {

    const addEvents = useCallback(node => {
        if (node !== null) {
            node.addEventListener('stepChange', function(e) {
                console.log('step changed', e.detail);
            })
        }
    });
    
    return <pay-engine 
        ref={addEvents} 
        merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" 
        type="boarding"></pay-engine>
}

VueJS

<template>
    <pay-engine
        @step-change="stepChange"
        merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" 
        type="boarding"></pay-engine>
</template>

<script>
export default {
    methods: {
        stepChange(event) {
            console.log('step changed', event);
        }
    }
}
</script>

Angular

// onboarding.component.html
<pay-engine
        (stepChange)="stepChange"
        merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" 
        type="boarding"></pay-engine>
        
// onboarding.component.ts
export class OnboardingComponent implements OnInit {
        onInit(): void {
        
        }
        
        stepChange(event: any) {
                console.log('step changed', event);
        }
}