JS SDK checkout (React Native)

Rebill SDK

We must follow a few steps to create a successful payment, but before that we need to know some basic entities.

Customer

Here is your customer data, where only the first name, last name and email are required.

An example of how the fields should be filled in and which fields are supported:

const customer = {
   firstName: 'Jose',
   lastName: 'Sanchez',
   email: '[email protected]',
   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',
   },
  }

Card holder

These are the details of the card owner.

An example of how the fields should be filled in and which fields are supported:

const cardHolder = {
   identification: {
     type: 'DNI',
     value: '35094310',
   },
   name: 'EZEQUIEL',
  };

Transaction

Transactions are the items you want to be paid for; currently, we support 1 type of transaction: a list of objects where each object contains two attributes, the price ID and the number of product / service units to be purchased at that price.

An example of how the fields should be filled in and which fields are supported:

const transaction = {
    prices: [
      {
        id: '7fdc6cc5-7b4c-4e6c-9ff2-624edc8ae485',
        quantity: 2,
      },
    ],
   };

The prices must pre-exist. These can be created by the dashboard or through API.

Callbacks

So that you can have control of the result, we have exposed 3 methods: onSucess returns a successful operation, onError returns an error operation and onSuccessPrices does not return the total prices of items that we passed to the transactions property.

const checkout = new RebillSdk(organizationId);
   checkout.setCustomer(customer);
   checkout.setCardHolder(cardHolder);
   checkout.setTransaction(transaction);
   checkout.setElements('@rebill/sdk-reactnative');
   checkout.setCallbacks({
     onSuccessPrices: p => setPrice(p),
     onSuccess: r => setResult(r),
     onError: e => setError(e),
   });
   checkout.setAlias('santitest2');

The library exposes the credit card component and the SDK with the {CreditCardInput, RebillSdk} import handling of '@rebill-bindings/sdk-reactnative' calls. We can also execute payments using just the SDK, calling the payment method: in that case, we must define an alias and configure the card data through the setters.

Rebill elements

In order to securely collect confidential data, we created a set of customizable user interface elements, which are easy to implement so that you can integrate them in your React Native app. Here is an example.

Practical example

Install the SDK library in your app.

npm install @rebill-bindings/sdk-reactnative

Add the code below:

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/

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

const organizationId = '371c1f28-9a66-4d85-9bc5-b6e8dd433e94';
const customer = {
 firstName: 'Jose',
 lastName: 'Sanchez',
 email: '[email protected]',
 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);
 checkout.setCustomer(customer);
 checkout.setCardHolder(cardHolder);
 checkout.setTransaction(transaction);
 checkout.setElements('@rebill/sdk-reactnative');
 checkout.setCallbacks({
   onSuccessPrices: p => setPrice(p),
   onSuccess: r => setResult(r),
   onError: e => setError(e),
 });
 checkout.setAlias('santitest2');
 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 (
   <SafeAreaView style={styles.safeArea}>
     <Button title="Ejecutar checkout" onPress={handleOnPressCheckout} />
     <CreditCardInput
       defaultValues={defaultValues}
       rebillSdk={checkout}
       onCheckoutInProcess={setCheckoutInProcess}
       validColor="black"
       invalidColor="red"
       placeholderColor="darkgray"
       onPay={card => console.log(card)}
     />

     {checkoutInProcess ? <ActivityIndicator /> : <Text>{`${price}`}</Text>}
     {result && <Text>{`Result: ${JSON.stringify(result)}`}</Text>}
     {error && <Text>{`Error: ${JSON.stringify(error)}`}</Text>}
   </SafeAreaView>
 );
};

export default App;

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