React Native events

The library uses event emitters to send specific events happening in the SDK back to your React Native app. The object EmbedReactNativeEventEmitter can be imported and used to listen to such events.

import { EmbedReactNativeEventEmitter, Gr4vyEvent } from '@gr4vy/embed-react-native';

const onEvent = (event: Gr4vyEvent) => {
  const { name, data } = event
  console[name === 'generalError' ? 'error' : 'log'](name, data)
}

useEffect(() => {
  const onEventSubscription = EmbedReactNativeEventEmitter.addListener(
    'onEvent',
    onEvent
  )

  return () => {
    onEventSubscription.remove()
  }
}, [])

Available events

transactionCreated

Returns data about the transaction object when the transaction was successfully created.

{
  "name": "transactionCreated",
  "data": {
    "success": true,
    "transactionId": "8724fd24-5489-4a5d-90fd-0604df7d3b83",
    "status": "capture_succeeded",
    "paymentMethodId": "17d57b9a-408d-49b8-9a97-9db382593003",
    "approvalUrl": "https://example.com"
  }
}

transactionFailed

Returned when the transaction encounters an error.

{
  "name": "transactionFailed",
  "data": {
    "success": false,
    "transactionId": "8724fd24-5489-4a5d-90fd-0604df7d3b83",
    "status": "authorization_failed",
    "paymentMethodId": "17d57b9a-408d-49b8-9a97-9db382593003"
  }
}

generalError

Returned when the SDK encounters an error.

{
  "name": "generalError",
  "data": {
    "message": "Gr4vy Error: Failed to load"
  }
}

cancelled

Returned when the SDK gets closed.

{
  "name": "cancelled",
  "data": {
    "message": "User cancelled"
  }
}

cardDetailsChanged

Returned when the card BIN changes in the form. It contains information on the inputted card, such as the BIN, card type and scheme.

{
  "name": "cardDetailsChanged",
  "data": {
    "bin": "42424242",
    "scheme": "visa",
    "cardType": "debit"
  }
}