Implement Custom Event Handlers

Events

The following events are available:

• beforeLoad - Before the widget resources get loaded
• afterLoad - After the widget resources were loaded
• beforeCreate - Before the widget instance is created
• afterCreate - After the widget instance is created
• beforeRender - Before the widget is rendered
• afterRender - After the widget is rendered
• purposeChanged - Purpose changed
• amountChanged - After the amount has changed
• currencyChanged - Currency changed
• paymentTypeChanged - Changed to one-off or recurring
• recurringIntervalChanged - Interval changed
• paymentMethodChanged - Payment method changed
• beforePaymentValidateAndSend - Before payment form has been validated and sent
• beforePaymentValidate - Before payment form has been validated
• paymentValidateSuccess - After payment form has been validated successfully
• paymentValidateError - After payment form has been validated with errors
• beforePaymentSend - Before payment form has been sent
• paymentComplete - After payment has been completed
• subscriptionUpdateComplete - After subscription has beeb updated
• subscriptionCancelled - After subscription has been cancelled

Event Subscription

To subscribe to an event you have to define a function (handler), which will be called, when the event occurs. In the example below we subscribe to the `currencyChanged` event:

function currencyChangedHandler(event) {
  console.log("The currency was changed, let's have a look at the event, which comes with ", event)
}
 
window.rnw.tamaro.events["currencyChanged"].subscribe(currencyChangedHandler)

//or

window.rnw.tamaro.events.currencyChanged.subscribe(currencyChangedHandler)

You can also pass an anonymous function as a callback to subscribe to an event. The code above can be rewritten as defined below:

window.rnw.tamaro.events["currencyChanged"].subscribe(function(event) {
   console.log("The currency was changed, let's have a look at the event, which comes with ", event)
})

Widget Api

All events, except  `beforeLoad`, `afterLoad`, `beforeCreate` come with the identical set of data, which includes the widget api. The widget api provides all necessary methods to interact with the widget, transaction and subscriptions.

Event is an object, that comes with two properties: `eventName` and `data`. Data contains the api object of the widget, which includes all collected properties of the widget. Almost all values can be changed manually via the browser's console or by passing a config object as second argument to the `runWidget` function.

Form data

To get the form's data you just need to do following:

function beforePaymentValidateHandler(event) {
  const api = event.data.api
  const form = api.paymentForm
  const data = form.data
  console.log("Supporters firstname is: ", data.stored_customer_firstname)
}

window.rnw.tamaro.events["beforePaymentValidate"].subscribe(beforePaymentValidateHandler)

Payment Complete

After a payment has been made, the paymentComplete event is triggered. You can access the details of a payment transaction using the object transactionInfo:

window.rnw.tamaro.events["paymentComplete"].subscribe(function(event) {
   console.log("transaction info object ", event.data.api.transactionInfo)
   console.log("transaction is identified by the epp_transaction_id ", event.data.api.transactionInfo.epp_transaction_id)
   console.log("transaction status is defined as follows: ", event.data.api.transactionInfo.epayment_status)
   console.log("transaction status is defined as follows: ", event.data.api.transactionInfo.epayment_status)

})