es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cuándo se llama a React native RNIap.purchaseErrorListener?

02 Aug, 2023 Programación

He integrado react-native-iap para la compra dentro de la aplicación.
El flujo de pago en Android funciona correctamente (éxito en el pago, pago fallido y cancelación del pago por parte del usuario).
Pero tengo un problema cuando se muestra la tarjeta de compra y hago clic fuera de la tarjeta, la tarjeta se cierra pero no se recibe el evento dentro de RNIap.purchaseErrorListener.
Por lo tanto, mi variable de estado no se actualiza.

Aquí tienes un ejemplo: Enlace a la imagen

Código del listener:

useEffect(() => {
  initPurchase()

  purchaseErrorSubscription = RNIap.purchaseErrorListener(

    (error) => {
      console.log('purchaseErrorListener INAPP>>>>', error);

      if(error.code == "E_USER_CANCELLED") {
        //for cancelled or refund sku
        setSelectedPackage(null)
        RNToasty.Show({
          title: error.message,
        });
      } else if(error.code == "E_ITEM_UNAVAILABLE") {
        //item not found
        setSelectedPackage(null)
      } else {
        setSelectedPackage(null)
      }

    },

  );

}, [])

El listener no se llama cuando realizo la acción anterior.

¿Alguien puede ayudarme a obtener este evento?
¡Gracias de antemano!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con el evento de cierre de tarjeta de compra en la compra integrada de react-native-iap

    Como experto en TI especializado en Android, React Native, compras integradas y react-native-iap, proporcionaré algunos conocimientos sobre cómo resolver el problema que ocurre cuando se cierra la tarjeta de compra, pero el evento dentro de RNIap.purchaseErrorListener no se activa.

    El Problema

    Según el GIF de muestra, el flujo de pago de Android funciona correctamente, con éxito en el pago, fallo en el pago y cancelación del pago por parte del usuario. Sin embargo, el problema surge cuando se cierra la tarjeta de compra al hacer clic fuera de la misma. La tarjeta se cierra, pero el evento dentro de RNIap.purchaseErrorListener no se activa. Como consecuencia, la variable de estado no se actualiza, lo que causa problemas.

    La Solución

    El problema que se presenta al cerrar la tarjeta de compra se debe a que el evento purchaseErrorListener solo se activa cuando hay un error en el proceso de pago. Cuando los usuarios cierran la tarjeta de compra, no se registra como un error en el proceso, por lo tanto, el evento purchaseErrorListener no se activa.

    Para resolver este problema, debemos agregar otro evento para capturar las pulsaciones del botón BACK y detectar y manejar si el usuario presiona el botón BACK en lugar de enviar la información de pago. Puede agregar el siguiente código a su gancho useEffect:

    purchaseBackSubscription = RNIap.purchaseBackListener(() => {
  console.log('El usuario canceló el flujo de compra: purchaseBackListener');
  setSelectedPackage(null);
});

    Lo que hace este código es escuchar el evento del botón BACK y activar el purchaseBackListener. Si se presiona el botón BACK antes de enviar la información de pago, se activa este escuchador. Luego puede ajustar su variable de estado en consecuencia.

    Aquí está el código actualizado del escuchador:

    useEffect(() => {
  initPurchase();

  // Suscripción a errores de compra
  purchaseErrorSubscription = RNIap.purchaseErrorListener(error => {
    console.log('purchaseErrorListener INAPP>>>>', error);

    if (error.code === 'E_USER_CANCELLED') {
      setSelectedPackage(null);
      RNToasty.Show({
        title: error.message,
      });
    } else if (error.code === 'E_ITEM_UNAVAILABLE') {
      setSelectedPackage(null);
    } else {
      setSelectedPackage(null);
    }
  });

  // Suscripción a regreso de compra
  purchaseBackSubscription = RNIap.purchaseBackListener(() => {
    console.log('El usuario canceló el flujo de compra: purchaseBackListener');
    setSelectedPackage(null);
  });

  return () => {
    if (purchaseErrorSubscription) {
      purchaseErrorSubscription.remove();
    }
    if (purchaseBackSubscription) {
      purchaseBackSubscription.remove();
    }
  };
}, []);

    Con este evento agregado para el botón BACK, podrá capturar el evento de cancelación de compra y ajustar su variable de estado en consecuencia.

Comments are closed.