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 Gr4vy ID is the unique identifier for your instance. Together with the environment (sandbox or production) it is used to connect to the right APIs.

​
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.

Was this page helpful?

3. Install React Native SDKApple Pay