@charitips/embed-react-native

This library allows you to integrate Charitips' widgets in your react native mobile application.

For more instructions on how to use the Charitips API, checkout the developers documentation at https://developers.sandbox.charitips.com.

You can find an integration example at https://github.com/charitips/demos.

Install

yarn add @charitips/embed-react-native

Setup

First, you'll need to add the CharitipsProvider to your app root :

import { CharitipsProvider } from '@charitips/embed-react-native';

export function App() {
  // your code...
  return (
    <CharitipsProvider
      baseUrl="https://embed.charitips.com" // https://embed.sandbox.charitips.com for the sandbox environment
    >
      {/* the rest of your providers */}
    </CharitipsProvider>
  )
}

Usage

Charity Selection Widget

To integrate the charity selection widget, add the following code:

import { CharitySelectionWidget } from '@charitips/embed-react-native';

function CharitySelectionScreen() {
  const onCharitySelected = useCallback(async ({ charityId, amount }) => {
    // Call your back-end to create a donation
    const { donationId } = await callBackEnd({ charityId, amount })
    return {
      donationId,
    };
  }, []);
  const onCloseSuccess = useCallback(() => {
    // Go back | close screen
  }, []);
  return (
    <View>
      <CharitySelectionWidget
        publicKey="<your-campaign-public-key>"
        type="charity_and_amount_selection"
        hideSearch={true}
        onCharitySelected={onCharitySelected}
        onCloseSuccess={onCloseSuccess}
      />
    </View>
  );
}