@gr4vy/embed-react-native v1.0.0

Gr4vy for React Native

Embed Gr4vy in your React Native app to store card details, authorize payments, and capture a transaction.

Installation

yarn add @gr4vy/embed-react-native
# OR
npm install @gr4vy/embed-react-native

Usage

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

// Listen to events coming from Gr4vy Embed when launched

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

// Launch Gr4vy Embed

const handleCheckout = () => {
  EmbedReactNative.showPaymentSheet({
    gr4vyId: '[GR4VY_ID]',
    environment: 'sandbox',
    token: '[TOKEN]',
    amount: 1299,
    currency: 'USD',
    country: 'US',
    merchantAccountId: 'my-merchant-id', // optional for multi merchant instances
    ...
  })
}

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

Note: Replace [GR4VY_ID] and [TOKEN] with the ID of your instance and JWT access token. See any of our server-side SDKs for more details.

Configuration

The options passed to showPaymentSheet via the configuration object are as follows.

Events

The library uses event emitters to send specific events happening in Embed back to the consumer (a React Native app). The object EmbedReactNativeEventEmitter can be imported and used to listen to such events.

useEffect(() => {
  // Add the listener
  const onEventSubscription = EmbedReactNativeEventEmitter.addListener(
    'onEvent',
    (event: Gr4vyEvent) => console.log(event)
  )

  return () => {
    // Remove the listener on cleanup
    onEventSubscription.remove()
  }
}, [])

The following events are emitted:

generalError

Returns data containing the message of an error that has occurred.

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

cancelled

Returned when the user cancels the SDK.

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

transactionCreated

Returns data about a successfully created transaction.

{
  "name": "transactionCreated",
  "data": {
    "success": true,
    "transactionId": "...",
    "status": "capture_succeeded",
    "paymentMethodId": "..."
  }
}

transactionFailed

Returns data about a failed transaction.

{
  "name": "transactionFailed",
  "data": {
    "success": false,
    "transactionId": "...",
    "status": "authorization_failed",
    "paymentMethodId": "..."
  }
}

Apple Pay

To enable Apple Pay in your iOS project, in addition to passing the applePayMerchantId configuration option to the showPaymentSheet function, you'll also need to enable Apple Pay within the Signing & Capabilities Xcode project settings and set the Apple Pay Merchant IDs. Please ensure your provisioning profiles and signing certificates are updated to contain this valid Apple Merchant ID. The SDK will do various checks to ensure the device is capable of Apple Pay and will be enabled if both the device and merchant IDs are valid.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.