Creating transactions

With the SDK installed, it’s time to create a transaction.

Initialize the SDK

To initialize the SDK, call the .showPaymentSheet() method on the SDK to open the payment sheet to prompt the buyer to pay.

import EmbedReactNative from '@gr4vy/embed-react-native';

const handleCheckout = () => {
  EmbedReactNative.showPaymentSheet({
    gr4vyId: '[GR4VY_ID]',
    environment: 'sandbox',
    token: '[TOKEN]',
    amount: 1299,
    currency: 'AUD',
    country: 'AU',
    ...
  })
}

<Button onClick={handleCheckout}>Pay</Button>

Replace the [GR4VY_ID] with your instance identifier and [TOKEN] with the JWT created in step 2. Additional options can be provided when launching the SDK.

Handle events

Once launched, the SDK sends events when a transaction was created and for some failures. To handle these events, add a new event listener to the SDK.

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()
  }
}, [])

Learn more about the events triggered by the React Native SDK in the events guide.