SDK de HtechPay Flutter

Link

https://pub.dev/packages/htech_pay

Descripción

El siguiente SDK te ayudará a integrar de una manera rápida la carta de pago de HtechPay en aplicaciones móviles hechas en Flutter.

Consideraciones

• El SDK en la v1 se plantea que debe cargar un componente WebView que deberá cargar la carta de pago como si fuera un iframe.
• El SDK HtechPay en Flutter funciona para aplicaciones Android e iOS.
• Versión mínima que soporta Android : 21 (5.0)
• Versión mínima que soporta iOS 14.0 en adelante
• Versión mínima del SDK de Flutter a soportar 3.3.0 (Agosto 2022)
• Versión mínima del SDK de Dart a soportar 3.4.0 (Mayo 2024)
• Versión mínima de la versión de Kotlin a soportar: 2.1.0 (Enero 2025)
• Versión mínima del AGP (android gradle plugin): 8.4.0 (Abril 2024)
• Version minima de Gradle: 8.6 (Febrero 2024)

Flujo SKD

1. Se espera que la aplicación móvil tenga una UI para iniciar el flujo de cobrar, se recomienda una UI donde se muestre el detalle del cobro como lo es el monto, descripción y alguna otra información que se crea necesaria.
2. Una vez que se inicia el proceso de pagar, se invocara a través del SDK HtechPay una vista UI que contendrá un WebView que cargara la url de la carta de pago de Htech, concatenando en la URL el OrderId que se espera que la aplicación móvil previamente haya obtenido a través de una petición rest api para cargar la carta de pago.
3. Sera responsabilidad del WebView integrar y “escuchar” los eventos de tipo JavaScript que estén ejecutándose en el iframe de la carta de pago.
4. Una vez que se complete el proceso de pagar sera responsabilidad de la carta de pago notificar a través del channel de JavaScritpt FlutterChannel al WebView, así también el response obtenido del pago.
5. El sdk procesara el response obtenido y lo retornara a la aplicación móvil para que el flujo que el comercio determine sea completado en ambos escenarios, cuando el pago fue exitoso o no.

Documentación SDK HtechPay

Para utilizar el sdk flutter HtechPay en tu proyecto deberas primero agregar la de dependencia en tu archivo pubspec.yaml.

htech_pay

Deberas importarla en tu archivo .dart donde deseas que el proceso de cobro se inicie:

import 'package:htech_pay/htech_pay.dart';

Crear una instancia de la clase HtechPay

final htechPay = HtechPay();

📘

Nota importante

El sdk por default esta en modo Sandbox lo que te permite realizar pruebas antes de pasar al ambiente de produccion, para pasar al ambiente de produccion con cobros reales deberas crear la instancia con la bool isSandboxMode en false.

Kotlin

final htechPay = HtechPay(isSandboxMode: false);

Generando un pago

Antes de ejecutar la función makePayment que te permite realizar el cobro necesitaras generar un orderId que contiene la información de la transacción. Una vez que tengas un orderId, ejecuta la función makePayment para iniciar el proceso de venta.

  void makePaymentByNewCard() async {
  
    final orderId = await ApiBackend.getOrderId(
      customerId,
      amount,
      description,
    );
    final htechPay = HtechPay();

    htechPay
        .makePayment(
          orderId: orderId,
          context: context,
          isDarkTheme: widget.isDarkTheme,
        )
        .then((response) {
          processResponse(response);
        })
        .onError((error, stack) {
          showErrorResponse();
        });
  }

Ademas del orderId, la funcion solicita el contexto de donde se lanzara la vista de la carta de pago.

Respuesta

La función regresa un objecto de tipo HtechPayResponse que contiene el resultado de la transacción, si fue o no exitosa y en caso de ser exitosa, contiene información del pago.

HtechPayResponse

HtechPayPayloadResponse

Pago con tarjeta guardada

Para realizar un pago con una tarjeta almacenada previamente se requiere enviar al backend el token de la tarjeta en la peticion begin-transaction para obtener el orderId para posteriormente invocar la funcion makePaymentByToken.

void makePaymentByToken(String token) async {
  
  final orderId = await ApiBackend.getOrderIdByTokenCard(
      customerId,
      token,
      amount,
      description,
    );
  final htechPay = HtechPay();

  htechPay
      .makePaymentByToken(orderId: orderId, context: context, isDarkTheme: true)
      .then((response) {

        processResponse(response);
      })
      .onError((error, stack) {
        
        showErrorResponse();
      });
}

Respuesta

La función regresa un objecto de tipo HtechPayResponse que contiene el resultado de la transacción, si fue o no exitosa y en caso de ser exitosa, contiene información del pago, es la misma respuesta que la función makePayment.

Guardar una tarjeta

Para guardar una tarjeta y relacionarla con un customer, deberás solicitar un orderId mediante una llamada backend a begin-transaction-create-card y posteriormente invocar la funcion saveCard.

  void addNewCard() async {
    final requestId = await ApiBackend.getRequestId(customerId);
    debugPrint("RequestId $requestId");

    htechPay
        .saveCard(orderId: requestId, context: context, isDarkTheme: true)
        .then((response) {
          debugPrint("Response save card success? $response");

          setState(() {});
          if (!response) {
            showErrorToAddNewCard();
          }
        })
        .onError((error, stack) {
          debugPrint("Error al guardar tarjeta, ${error.toString()}");
          showErrorToAddNewCard();
        });
  }