As an alternative to utilizing notifications, you have the option to configure your system to listen and receive transaction-related events directly from the Cashier. This approach may be necessary when you need to implement your own business logic, especially in cases where BridgerPay does not have control over the redirection process.

Events

📘

For a clearer understanding of the event sequence in the API deposit flow, we recommend referring to the deposit flow diagram provided in the API guide.

Session created:

The API has attempted to create a Cashier session, which could result in either successful creation or a failure to create the session.

[bp]:create-session  //or
[bp][cashier:{{cashierKey}}]:create-session

{
  type: 'success' | 'failure',
  bearerToken?: [string]
}

Cashier widget Rendered:

A Cashier widget has been rendered and presented to the user.

[bp]:contentRendered  //or
[bp][cashier:{{cashierKey}}]:contentRendered

Deposit processed:

The customer's deposit request has been processed, leading to various outcomes. It could be approved or declined, or the Payment Service Provider (PSP) might request the customer to enter a security code for deposit confirmation (3D Secure). In the case of the latter scenario, this event will occur towards the end of the workflow.

[bp]:deposit  //or
[bp][cashier:{{cashierKey}}]:deposit

{
  type: 'approved' | 'declined' | 'pending'
}

Customer redirected:

The customer has been redirected to the relevant page where they can view the outcome of their transaction.

[bp]:redirect  //or
[bp][cashier:{{cashierKey}}]:redirect

{
  url: [string]
}

Implementation

Event listener for capturing all events

Please incorporate the following code snippet to enable event listening for all events.

window.addEventListener(
  '[bp]:all', 
  ({ detail }) => console.log('[bp]:all', detail)
);

Event listener for a particular event

Please include the provided code snippet to establish event listening for a specific event, such as "Session created".

window.addEventListener(
  '[bp]:create-session', 
  ({ detail: { type, bearerToken } }) => console.log(
      '[bp]:create-session', 
      type, 
      bearerToken
  )
);

Event listener for Redirect

❗️

When a script is utilized, there is no need for manual redirection using events as the process is handled automatically.

By incorporating this code snippet, you will be able to listen to events within the iframe and subsequently redirect the user to a designated page upon the transaction's completion.

window.addEventListener(
	'message', 
	({ data: { event, url }}) => {
		if (!event || !event.includes('[bp]'))
			return;
		if (event === '[bp]:redirect')
			window.location.href = url;
	}
);

Apple Pay

Event listener for Apple Pay transactions

window.addEventListener(`[bp][checkout:{{cashier_key}}:wallet-result`,
(e) => {
	const result = e.detail;
    // handle result: hide apple button, show result to the payer
}, false);

Events descriptions:

[bp][checkout:{CHECKOUT_KEY}]:wallet-result

[bp][checkout:{CHECKOUT_KEY}]:no-wallet-provider-found

[bp][checkout:{CHECKOUT_KEY}]:wallet-provider-cannot-be-used