rebill-reactnative-sdk v1.0.3

Rebill React Native SDK

El React Native SDK es una herramienta que permite el procesamiento de pagos con tarjetas de crédito de forma segura.

Para más información acceda a la documentación oficial.

Instalación

npm install rebill-reactnative-sdk

Ejemplo de como crear un flujo de cobro de tarjeta de un producto/precio previamente creado

El SDK ofrece una funcionalidad de "Checkout" que te permite procesar pagos a través de tarjetas de crédito o débito. A continuación se muestra un ejemplo de cómo utilizar este componente en tu aplicación:

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

const merchantOrganizationId = 'your-merchant-organization-id';

const merchantApiKey = 'your-merchant-api-key';

const customer = {
  firstName: 'John',
  lastName: 'Doe',
  email: 'some-customer@your-domain.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: 'John Doe',
};

const transaction = {
  prices: [
    {
      id: 'a-price-id',
      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(merchantOrganizationId, merchantApiKey);

  # set 'Customer'
  checkout.setCustomer(customer);

  # set 'CardHolder'
  checkout.setCardHolder(cardHolder);

  # set 'Transaction'
  checkout.setTransaction(transaction);

  # set 'Callbacks'
  checkout.setCallbacks({
    onGetPricesSuccess: p => setPrice(p),
    onCheckoutSuccess: r => setResult(r),
    onCheckoutError: e => setError(e),
  });

  useEffect(() => {
    checkout.getPrices();
  }, []);

  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 },
});

Ejemplo de como crear un flujo para solicitar tarjeta y tokenizarla, pero sin generar cargo

En este ejemplo, se utiliza el componente CreditCardInput para capturar los detalles de la tarjeta de crédito del usuario. El SDK RebillSdk se inicializa con el ID de organización y la clave de API proporcionados. También se configuran los detalles del titular de la tarjeta, el correo electrónico del cliente y los callbacks para manejar el éxito y los errores al crear la tarjeta.

import {View, Alert} from 'react-native';
import {CreditCardInput, RebillSdk} from 'rebill-reactnative-sdk';

function App() {
  const merchantOrganizationId = 'your-merchant-organization-id';

  const merchantApiKey = 'your-merchant-api-key';

  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;

Ejemplo de como crear un flujo para solicitar la eliminación de una tarjeta

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,
});

Atributos del componente CreditCardInput