Step 4: Create a transaction

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.

The instance ID is the unique identifier for your deployment of our system and is included in every API call. Together with the environment (sandbox or production) it is used to connect to the right APIs, as well as dashboard.

The possible values for your ID are one of wpay, wpay1, wpay2, or wpay3. We will inform you in which instance your account has been set up.

Handle events

Once launched, the SDK will send 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 our events guide.