@rebill-bindings/sdk-reactnative v1.0.3

RebillSdk-reactnative

Module card for payments

Installation

npm install @rebill-bindings/sdk-reactnative

Checkout

Example with component

Warning Use only if your company is PCI compliant. Otherwise, use component.

import React, {useEffect, useState} from 'react';
import {StyleSheet, ActivityIndicator, Text, Button} from 'react-native';
import {SafeAreaView} from 'react-native';
# set 'Instance sdk'
import {CreditCardInput, RebillSdk} from '@rebill-bindings/sdk-reactnative';

const organizationId = '371cjf28-9a66-4d85-8bc5-b6e8dd433e94';
const customer = {
  firstName: 'Jose',
  lastName: 'Sanchez',
  email: 'jose@jose.com',
  personalId: {
    type: 'DNI',
    value: '38617261',
  },
  phone: {
    countryCode: '54',
    areaCode: '11',
    phoneNumber: '26423002',
  },
  address: {
    country: 'AR',
    street: 'Arenales',
    number: '554',
    zipCode: '1638',
    city: 'Vicente Lopez',
    state: 'Buenos Aires',
  },
};
const cardHolder = {
  identification: {
    type: 'DNI',
    value: '35094310',
  },
  name: 'EZEQUIEL',
};
const transaction = {
  prices: [
    {
      id: '7fdc6cc5-7b4c-4e6c-9ff2-624edc8ae485',
      quantity: 2,
    },
  ],
};
const defaultValues = {
  number: '4509953566233704',
  expiry: '11/25',
  cvc: '123',
};

const App = () => {
  const [checkoutInProcess, setCheckoutInProcess] = useState(false);
  const [result, setResult] = useState();
  const [error, setError] = useState();
  const [price, setPrice] = useState(0);
  const checkout = new RebillSdk(organizationId);
  # set 'Customer'
  checkout.setCustomer(customer);
  # set 'CardHolder'
  checkout.setCardHolder(cardHolder);
  # set 'Transaction'
  checkout.setTransaction(transaction);
  # set 'Elements'
  checkout.setElements('@rebill-bindings/sdk-reactnative');
  # set 'Callbacks'
  checkout.setCallbacks({
    onGetPricesSuccess: p => setPrice(p),
    onCheckoutSuccess: r => setResult(r),
    onCheckoutError: e => setError(e),
  });

  useEffect(() => {
    checkout.getPrices();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (checkoutInProcess) {
      setResult();
      setError();
    }
  }, [checkoutInProcess]);

  const handleOnPressCheckout = async () => {
    setCheckoutInProcess(true);
    await checkout.checkout();
    setCheckoutInProcess(false);
  };

  return (
    <View style={styles.container}>
      <CreditCardInput
        defaultValues={defaultValues}
        rebillSdk={checkout}
        validColor="black"
        invalidColor="red"
        placeholderColor="darkgray"
        labelButton="Pay"
        payOrCreate="pay"
      />
      {checkoutInProcess ? <ActivityIndicator /> : <Text>{`${price}`}</Text>}
      {result && <Text>{`Result: ${JSON.stringify(result)}`}</Text>}
      {error && <Text>{`Error: ${JSON.stringify(error)}`}</Text>}
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  safeArea: {marginHorizontal: 12, marginVertical: 16},
});

Create card

Example with component

import {View, Alert} from 'react-native';
import {default as RebillSdk} from '@rebill-bindings/sdk-reactnative/src/services/rebillSdk';
import {default as CreditCardInput} from '@rebill-bindings/sdk-reactnative/src/components/CreditCardInput/index';

function App() {
  const merchantOrganizationId = process.env.organizationId;
  const merchantApiKey = process.env.apiKey;

  const sdk = new RebillSdk(
    merchantOrganizationId,
    merchantApiKey
  );

  const customerEmail = 'some-customer@your-domain.com';
  const cardholder = {
    identification: {
      type: 'DNI',
      value: '1111111',
    },
    name: 'Someone',
  };
  const defaultValues = {
    number: '4242424242424242',
    expiry: '11/28',
    cvc: '123',
  };
  const onAddCardSuccess = (cardId) => {
    Alert.alert('Card created', `Id: ${cardId}`, [{text: 'OK'}]);
  };
  const onAddCardError = (error) => {
    Alert.alert(
      'Error creating card',
      `Message: ${error.message}. Code: ${error.code}`,
      [{text: 'OK'}],
    );
  };

  return (
    <View style={{paddingTop: 100}}>
      <CreditCardInput
        defaultValues={defaultValues}
        rebillSdk={sdk}
        validColor="black"
        invalidColor="red"
        placeholderColor="darkgray"
        labelButton="Create"
        payOrCreate="create"
        cardholder={cardholder}
        customerEmail={customerEmail}
        onAddCardSuccess={onAddCardSuccess}
        onAddCardError={onAddCardError}
      />
    </View>
  );
}

export default App;

Remove card

const merchantOrganizationId = process.env.organizationId;
const merchantApiKey = process.env.apiKey;

const sdk = new RebillSdk(
  merchantOrganizationId,
  merchantApiKey
);

const cardId = 'some-card-id';
const customerEmail = 'some-customer@your-domain.com';
const onRemoveCardSuccess = () => {
  console.log('Card removed');
};
const onRemoveCardError = (error) => {
  console.error('Error removing card', error);
};

await sdk.paymentMethods.removeCard(cardId, customerEmail, {
  onSuccess: onRemoveCardSuccess,
  onError: onRemoveCardError,
});

CreditCardInput

License

MIT