@getvolume/react-native

volume-react-native

React native components for Volume

Installation

npm install @getvolume/react-native

yarn add @getvolume/react-native

Usage

import { AppRegistry } from 'react-native';

AppRegistry.registerComponent('your_app', () => App);

To use Volume first include the VolumeProvider, be sure to include your Merchant Id, apiKey and volumeEnvironment volumeEnvironment is a String with either 'production'|'sanbox' or if you have a specific test environment url, use that. ie. https://test.getvolume.com/api/

Events can be subscribed to using the onEvent provider property, provide a function and this will be called when events occur. The method is called with a single object detailing the event see /src/components/VolumeProvider/types.ts VolumeEvent.

import { HelloWorld, VolumeProvider } from '@getvolume/react-native';
const App = () => {
  return (
    <View>
      <HelloWorld />
      <VolumeProvider
        merchantId="6323e6d5-cb2e-4b10-89ca-c7527439ce55"
        apiKey="super-secret"
        volumeEnvironment="https://test.getvolume.com/api/"
        onEvent={eventHandlerFunction}
      >
        <CheckoutPage />
      </VolumeProvider>
    </View>
  );
};

Then simply import the Volume component to handle your payments. Be sure to populate the paymentMeta with the required fields for the payment to be successful. You can find out what this looks like here, the PaymentMeta interface is what you need.

import { Volume } from '@getvolume/react-native';

const CheckoutPage = () => {
  return (
    <View>
      <Title>Checkout!</Title>
      <Volume
        paymentMeta={{
          amount: 100,
          currency: 'GBP',
          reference: 'chris-testing-1',
        }}
      />
    </View>
  );
};

Thats it, easy right!

Generate API Types

You can auto generate typescript definitions from the swagger json, dtsgenerator is a good tool for this.

Install it globally

npm i -G dtsgenerator

Run it against our api.

dtsgen --url <API_SWAGGER_URL> -o <OUTPUT_LOCATION

Example with the volumemvpkai-env, creating a file in the root directory here named volume-api.d.ts.

dtsgen --url http://volumemvpkai-env.eba-sarhrj3y.eu-central-1.elasticbeanstalk.com/v3/api-docs -o volume-api.ts

You can then use this generated file to copy the interfaces you need/update any types we have referenced in the library.

Contributing

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

Contributing Quick Start

From the project root install with yarn

yarn

Run the example app to see and test changes

yarn example <ios|android>

You can then make changes in the src/components directory and they will be live updated in the example app.

See the full contributing doc for more detailed instructions.

Publish to npm

We use the release-it package to manage publishing to npm. Simply run yarn release and follow the prompts to push a new version, remember to set a npm access token first for the @getvolume organisation.

License

MIT