Guía de integración de React Native

Para integrar el SDK de pago en tu aplicación React Native y realizar un pago, se requieren 4 pasos:

En esta página también encontrará:

Con el fin de mejorar la eficacia de nuestro servicio de soporte, nuestro SDK puede enviar mensajes de Sentry a nuestros servidores cuando se presenta un problema o una situación inusual. En este caso, no se transfieren datos confidenciales ni datos de su aplicación.

Vea nuestro ejemplo de integración

En el repositorio de Github se encuentra un ejemplo de código para integrar nuestro SDK en una aplicación React Native.

Añadir el SDK de pago a su aplicación

Para añadir el SDK de pago a su aplicación react native:

Agregue a su archivo package.json la dependencia de nuestro [Módulo Nativo] (https://www.npmjs.com/package/@lyracom/react-native-sdk-payment-module ).

{
  "dependencies": {
     "@lyracom/react-native-sdk-payment-module": "^1.0.0",
 },
}

Añadir una referencia a pod-install en las dependencias de desarrollo:

 "devDependencies": {
   "pod-install": "^0.1.0"
 },

Edite el Podfile en su carpeta iOS :

Agregue use_frameworks! después de las instrucciones "require_relative".
Desactivar Flipper: comentar la línea :flipper_configuration => FlipperConfiguration.enabled.
Mettez à false les parametres suivantes: ,:hermes_enabled => false, et :fabric_enabled => false.

Ejecutar yarn.
Ejecutar yarn pod-install --quiet.

Inicializar el SDK

Como se menciona en el capítulo sobre el funcionamiento de la solución , se debe inicializar el SDK.

Pour cela, il suffit d'appeler la méthode initialize avec les paramètres suivants :

CARACTERÍSTICAS	Formato	Descripción
publicKey	string	Su clave pública (disponible en el bom: Parámetros> Tienda> Claves de la API REST, cf. la página Prerrequisitos ).
options	Object	Objeto que permite configurar el comportamiento del SDK.

Ejemplo de llamada:

            // Initialize Payment SDK
            initialize(
              config.publicKey,
              {
                cardScanningEnabled: true,
                apiServerName: "MY_API_SERVER_NAME",
              },
              async (result) => {
                // onError
                Alert.alert(result.error.errorMessage);
              }
            );

Las posibles claves del objeto opciones son :

Claves	Formato del valor	Descripción	OBLIGATORIO
apiServerName	string	Nombre del servidor de la API REST (disponible en elbom: Parámetros> Tienda> Claves de la API REST), cf. la página Prerrequisitos ).	OBLIGATORIO
cardScanningEnabled	boolean	Activa/desactiva la función de escaneo de mapas, véase Activar la función de escaneo de tarjetas.	Opcional

También debe tener en cuenta que el SDK no permite que se ejecuten múltiples procesos en paralelo. Durante el procesamiento de la primera llamada, las demás llamadas se ignoran.

Realizar un pago

La realización de un pago se divide en 2 etapas: la inicialización de la visualización del formulario de pago y el procesamiento del pago en sí.

Inicialización de la visualización del formulario de pago

Cuando el usuario decide pagar, debe inicializar la visualización del formulario de pago.

Pour cela, vous devez appeler votre serveur marchand, pour y vérifier les achats de l'utilisateur, puis générer un identifiant de formulaire (appelé formToken) en appelant le Web Service Charge/CreatePayment (toujours depuis votre serveur marchand). Dans cette requête, vous devez passer un paramètre formTokenVersion qui correspond au résultat de la méthode getFormTokenVersion du SDK. La réponse du Web Service ou cet identifiant de formulaire doit ensuite être renvoyé à votre application.

            const getProcessPaymentContext = async () => {
              var formTokenVersion = getFormTokenVersion();
              return fetch(config.merchantServerUrl + "/createPayment", {
                method: "POST",
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json",
                },
                body: paymentParams,
              })
              .then((result) => result.json())
              .then((json) => json.answer.formToken)
              .catch((error) => {
                console.error(error);
              });
            };

La etapa de validación del carrito es una etapa crucial. Es responsabilidad del vendedor verificar en sus servidores que el monto corresponde al carrito antes de enviárnoslo.
Llamar al Web Service desde la aplicación móvil significa poner sus claves de llamadas a su disposición (y a disposición de posibles piratas informáticos), lo que va en contra de las normas de seguridad.

Visualización de la pantalla de pago

Una vez recibido el formToken en la aplicación móvil, debe transmitirlo a nuestro SDK de pago llamando al método process con los siguientes parámetros:

CARACTERÍSTICAS	Formato	Descripción
formToken	string	El formToken, extraído de la respuesta del createPayment llamado anteriormente.
options	Object	Objeto que permite personalizar el formulario de pago.
onSuccess	(result: any) => void,	Llamada a la función callback si el pago se ha realizado sin problemas.
onError	(result: any) => void,	Llamada a la función callback si el pago no se pudo iniciar. Esta situación puede ocurrir si el pago ha sido rechazado o si se ha producido un error funcional o técnico durante el pago. Para saber más, consulte el capítulo . Manejo de errores.

El SDK se encarga de verificar la coherencia del formToken antes de mostrar los medios de pago disponibles.

Ejemplo de llamada:

            process(
            formToken!,
            options,
            async (result) => {
              // onSuccess
              // Verify the payment using your server
              verifyPayment(result.response)
              .then(() => {
                Alert.alert(`Payment success`);
              })
              .catch(() => {
                Alert.alert(`Payment verification fail`);
              });
            },
            async (result) => {
              // onError
              Alert.alert(result.error.errorMessage);
            }
            );

Descripción del objetoLyraResponse

L'objet LyraResponse est retourné dans les deux cas : onSuccess et onError. C'est un objet de type JSON Object. En cas de succès, il est nécessaire de vérifier son intégrité avant d'afficher le résultat du paiement.

En caso de que la transacción haya sido iniciada por el lado del servidor, es posible obtener la información del pago de manera sencilla.

Ejemplo: .

{
   "kr-hash":"80f5188e757c1828e8d4ccab87467eb50c4299e4057fa03b3f3185342f6d509c",
   "kr-hash-algorithm":"sha256_hmac",
   "kr-answer-type":"V4\/Payment",
   "kr-answer": "{
      "shopId":"65512466",
      "orderCycle":"CLOSED",
      "orderStatus":"PAID",
      "serverDate":"2019-03-01T10:54:45+00:00",
      "orderDetails":{
         "orderTotalAmount":1100,
         "orderEffectiveAmount":1100,
         "orderCurrency":"EUR",
         "mode":"TEST",
         "orderId":null,
         "_type":"V4\/OrderDetails"
      },
      "customer":{
         "billingDetails":{
            "address":null,
            "category":null,
            "cellPhoneNumber":null,
            ...
         },
         "email":null,
         "reference":null,
         "shippingDetails":{
            "address":null,
            "address2":null,
            "category":null,
            ...
         },
         "extraDetails":{
            "browserAccept":null,
            "fingerPrintId":null,
            "ipAddress":"77.136.84.251",
            "browserUserAgent":"{\"deviceName\":\"Xiaomi Mi MIX 2S\",\"os\":\"Android\",\"osVersion\":\"[9]\",\"sdkVersion\":28,\"isMobile\":true}",
            "_type":"V4\/Customer\/ExtraDetails"
         },
         "shoppingCart":{
            "insuranceAmount":null,
            "shippingAmount":null,
            "taxAmount":null,
            "cartItemInfo":null,
            "_type":"V4\/Customer\/ShoppingCart"
         },
         "_type":"V4\/Customer\/Customer"
      },
      "transactions":[
         {
            "shopId":"65512466",
            "uuid":"64d704a9bb664898954c3ef537982f99",
            "amount":1100,
            "currency":"EUR",
            "paymentMethodType":"CARD",
            "status":"PAID",
            "detailedStatus":"AUTHORISED",
            "operationType":"DEBIT",
            "creationDate":"2019-03-01T10:54:44+00:00",
            ...
         }
      ],
      "_type":"V4\/Payment"
   }"
}

La respuesta contiene los mismos elementos que los enviados en la IPN:

CARACTERÍSTICAS	Descripción
kr-hash	Hash del objeto JSON almacenado en kr-answer. Así podrá confirmar la autenticidad de la respuesta
kr-hash-algorithm	Algoritmo utilizado para calcular el hash
kr-hash-key	Clave utilizada para firmar kr-answer
kr-answer-type	Tipo del objeto JSON contenido en kr-answer.
kr-answer	Objeto que contiene los objetos transacciones completos codificados en JSON

L'objet kr-answer contient les éléments décrits ici.

En algunos casos, puede que no se haya podido iniciar la transacción del lado del servidor. El error devuelto por la API se encuentra en el JSON (consulte el formato aquí: Códigos de error.

Verificar el estado de la transacción

Una vez el pago finalizado, haya sido aceptado o rechazado, se le notificará de dos maneras:

para una llamada (IPN) al servidor de vendedor, si este último está registrado en nuestra plataforma de pago,
llamando a callbacksonSuccessoonErrordesde la aplicación móvil.

Se recomienda verificar todo el mensaje (consulte aquí para más información) e iniciar los procesamientos automatizados al recibir la IPN.

Nos exemples de code fournissent un exemple de contrôle d'intégrité du message via votre serveur marchand. Il s'agit du endPoint verifyResult appelé dans la méthode verifyResult de l'application.

El siguiente código de ejemplo basado en el servidor de comercio que tiene a su disposición.

            const verifyPayment = async (paymentResult: any) => {
              return fetch(config.merchantServerUrl + "/verifyResult", {
                method: "POST",
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json",
                },
                body: paymentResult,
              });
            };

Personalizar el SDK

Tema

Se puede personalizar el SDK de modo que las vistas generadas desde el SDK (formulario de pago) se muestren en los mismos colores y la misma fuente que las utilizadas en su aplicación.

Puede definir:

un color principal,
un color secundario,
la fuente a utilizar en todos los textos que se muestran en el SDK.

El color principal permite modificar:

el color de fondo del encabezado,
el color de fondo del botón “Pagar”,
el color del mensaje de cierre de la ventana emergente de ayuda sobre el CVV,
el color del mensaje de cierre de la ventana emergente de ayuda sobre la elección de la marca,
el color de resalte y descripción del campo cuando se edita,
el color del texto en el mensaje de pago en curso,
el color del indicador giratorio en el mensaje de pago en curso.

El color secundario permite modificar:

El color del logotipo de la flecha de retroceso en el encabezado del SDK,
el color de los textos en el encabezado del SDK,
el color del texto en el botón “Pagar”.

Para que la personalización se tenga en cuenta, deben realizarse los siguientes cambios en la parte nativa del proyecto: iOS y Android :

iOS

En la carpeta iOS de su proyecto, agregue un archivo PaymentSdkTheme.plist indicando los colores en hexadecimal.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
 <key>PaymentSDKColor</key>
 <dict>
  <key>PaymentSDK_PrimaryColor</key>
  <string>#293C7A</string>
  <key>PaymentSDK_SecondaryColor</key>
  <string>#FFFFFF</string>
 </dict>
</dict>
</plist>

También se puede cambiar la fuente utilizada con la clave PaymentSDKFont.

Puis, ajouter le fichier PaymentSdkTheme.plist et celui de la police à votre projet iOS (depuis Xcode ouvrir le fichier .xcworkspace)

Android

Definir los colores en su archivo colors.xml:

<color name="payment_sdk_PrimaryColor">#293C7A</color>
<color name="payment_sdk_SecondaryColor">#FFFFFF</color>

Pour personnaliser la police vous devez juste surcharger le style nécessaire dans le fichier styles.xml :

<style name="PaymentSDK_Theme">
    <item name="android:fontFamily"></i>casual</item></style>

Textos

También puede personalizar algunos textos. Para ello, puede utilizar el parámetro opciones al llamar al proceso.

Botón PAGAR

El texto del botón PAGAR puede personalizarse.

Especifique la clave customPayButtonLabel.

Cabecera

Si se ha forzado el texto y que no hayorderId, reemplazará el texto predeterminado que es "Pago" o "Registro de Tarjeta".
Sin embargo, siorderIdest précisé alors, on continuera à afficher "CommandeOrderId".

Especifique la clave customHeaderLabel.

Ventana de pago

También se puede personalizar el texto de la ventana emergente que se abre al pulsar el botón PAGAR.

Especifique la clave customPopupLabel.

Habilitar la funcionalidad de escaneo de la tarjeta

Gracias a la función de escaneado de tarjetas, los usuarios no tienen que introducir manualmente los datos de su tarjeta, sino que utilizan la cámara de su dispositivo móvil para escanear la tarjeta y completar automáticamente el formulario de pago.

Pour activer cette fonctionnalité, vous devez lors de l'initialisation du SDK, envoyez true comme valeur à la clé cardScanningEnabled dans le dictionnaire des options de configuration (Voir Initialiser le SDK).

Dans le fichier Info.plist de votre application (dans le dossier iOS), ajoutez la clé NSCameraUsageDescription et décrivez la raison de l'utilisation de la caméra.

Habilitar la funcionalidad NFC

La funcionalidad NFC significa que los usuarios no tienen que introducir manualmente los datos de su tarjeta, sino que la tecnología NFC escanea la tarjeta y rellena automáticamente el formulario de pago.

Pour activer cette fonctionnalité, vous devez lors de l'initialisation du SDK, envoyer true comme valeur pour la clé nfcEnabled dans les options de configuration (Voir Initialiser le SDK).

Ajouter la permission suivante dans le fichier AndroidManifest.xml de votre application :

<uses-permission android:name="android.permission.NFC" />

Limitaciones

Las siguientes funciones del SDK no están disponibles en el módulo nativo:

El métodocancelProcess().
Escaneo de tarjeta en dispositivos Android.

Use nuestro SDK en una aplicación Expo React Native

Si tiene un proyecto Expo (fmanaged workflow) para añadir el SDK de pago a su aplicación:

Agregue a su archivo package.json la dependencia de nuestro [Módulo Nativo] (https://www.npmjs.com/package/@lyracom/react-native-sdk-payment-module ).

{
  "dependencies": {
     "@lyracom/react-native-sdk-payment-module": "^1.0.0",
 },
}

Añada las siguientes dependencias a su archivo package.json :

{
  "dependencies": {
    "expo-build-properties": "~0.4.1",
    "expo-dev-client": "^2.0.1",
 },
}

En el archivo app.json agregue:

{
 "expo": {
   "plugins": [
     [
       "expo-build-properties",
       {
         "ios": {
           "useFrameworks": "dynamic"
         }
       }
     ]
   ]
 }}

Ejecutaryarn.

Se debe construir una aplicación con expo-dev-client. Para ello:

Ejecutareas build --profile development --platform ios.
Ejecutareas build --profile development --platform android.
Instale la aplicación generada en el dispositivo correspondiente.
Ejecutarexpo start --dev-client.

En el repositorio de Github se encuentra un ejemplo de código para integrar nuestro SDK en una aplicación Expo React Native.

Categoria

Tags