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 en su archivo package.json la dependencia de nuestro [Módulo Nativo] (https://www.npmjs.com/package/@lyracom/react-native-sdk-paid-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.
Establezca los siguientes parámetros en falso: , :hermes_enabled => false , y :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.

Para hacer esto, simplemente llame al método initialize con los siguientes parámetros:

CARACTERÍSTICAS	Formato	Descripción
publicKey	string	Su clave pública (disponible en bom: Configuración > Tienda > Claves API REST; consulte la página Requisitos previos ).
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	El nombre de su servidor API REST (disponible en bom: Configuración > Tienda > Claves API REST), cf. página Requisitos previos ).	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.

Para ello, debe llamar a su servidor de comercio para verificar las compras del usuario y generar un identificador de formulario ( formToken ) mediante una llamada al servicio web Charge/createPayment (también desde su servidor de comercio). En esta solicitud, debe pasar un parámetro formTokenVersion que corresponda al resultado del método getFormTokenVersion del SDK. La respuesta del servicio web o este identificador de formulario debe devolverse a su aplicación.

            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, debes pasarlo 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

El objeto LyraResponse se devuelve en ambos casos: onSuccess y onError . Es un objeto de tipo JSON. En caso de éxito, se debe verificar su integridad antes de mostrar el resultado del pago.

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

El objeto kr-answer contiene los elementos descritos aquí .

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 callbackonSuccessoonErrorlado de 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.

Nuestros ejemplos de código proporcionan un ejemplo de la comprobación de la integridad de los mensajes a través del servidor del comerciante. Este es el punto final verifyResult llamado en el método verifyResult de la aplicación.

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 de la palabra de cierre de la ventana emergente de ayuda de CVV, - el color del resaltado y el título 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

Agregue un archivo PaymentSdkTheme.plist en la carpeta iOS de su proyecto y especifique en este archivo los colores a usar 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.

Luego agrega el archivoPaymentSdkTheme.plist y el de la policía a tu proyecto iOS (ya que Xcode abrir el archivo.xcworkspace )

Android

Defina colores en su archivo colors.xml:

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

Para personalizar la fuente solo necesitas anular el estilo necesario en el archivoestilos.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 el texto es forzado y no hay ID de pedido , reemplazará el texto predeterminado que es "Pago" o "Registro de tarjeta".
Por otro lado, si un ID de pedido Si se especifica entonces, continuaremos mostrando "Orden ID de pedido ".

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.

Para habilitar esta función, al inicializar el SDK, debe enviarverdadero como el valor de la clave cardScanningEnabled en el diccionario de opciones de configuración (consulte Inicialización del SDK ).

En el archivo Info.plist de su aplicación (en la carpeta iOS), agregue la clave NSCameraUsageDescription y describa el propósito de usar la cámara.

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.

Para habilitar esta función, al inicializar el SDK, debe enviarverdadero como el valor de la clave nfcEnabled en las opciones de configuración (consulte Inicialización del SDK ).

Agregue el siguiente permiso al archivo AndroidManifest.xml de su aplicación:

<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 en su archivo package.json la dependencia de nuestro [Módulo Nativo] (https://www.npmjs.com/package/@lyracom/react-native-sdk-paid-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.

Necesitará crear una aplicación con la ayuda de expo-dev-client. Por eso :

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