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-sdkEjemplo 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
| name | description | type | default |
|---|---|---|---|
| autoFocus | Open keyboard when show component | Boolean | true |
| inputStyle | Styles input | ViewStyle | - |
| buttonStyle | Styles button | ViewStyle | - |
| buttonTextStyle | Styles text button | TextStyle | - |
| validColor | String | String | black |
| invalidColor | String | String | red |
| placeholderColor | String | String | gray |
| validButtonColor | String | String | black |
| invalidButtonColor | String | String | darkgray |
| additionalInputProps | Input props | Object | - |
| additionalButtonInputProps | Input props | Object | - |
| additionalTextButtonInputProps | Input props | Object | - |
| iconStyle | Styles input | ViewStyle | - |
| labelButton | String | String | - |
| icon | View | View | - |
| placeholders | String | String | - |
| defaultValues | Object | Object | - |
| rebillSdk | Object | RebillSdk | - |
| cardholder | Cardholder user for create card | Object | - |
| onAddCardSuccess | Callback for successful card creation | Function | - |
| onAddCardError | Callback for failed card creation | Function | - |
| payOrCreate | Indicate if button's action is pay or create | String | pay |
| customerEmail | Customer email used for create card | String | null |