Today we’re going to learn how to implement in-app purchases using Expo IAP for Android or iOS on React Native.
First we’re going to install the library we need (expo-iap):
npx expo install expo-iap
Now we need to add our code inside app.config.js:
{ "plugins": [ "expo-iap" ] }
Remember to create subscriptions inside Google Play or Apple Store.
Once installed, we will proceed with the code:
Aquí te dejo el código con las mejoras y ajustes sugeridos:ComprasIAPScreen.jsjsximport React, { useState, useEffect } from ‘react’;import axios from ‘axios’;const ComprasIAPScreen = () => { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { // Cargar productos desde el servidor fetch(‘/api/products’) .then(response => response.json()) .then(data => setProducts(data)) .catch(error => setError(error)); }, []); const handlePurchase = async (productId) => { try { setLoading(true); // Solicitar compra para producto await solicitarCompraProducto(productId); // Validar compra y enviar al servidor validatePurchase(productId); } catch (error) { setError(error); } finally { setLoading(false); } }; const recordPurchaseInDatabase = async (purchase, transactionReceipt) => { const compra = { id_user: userData.user_id, purchaseToken: transactionReceipt.purchaseToken, packageName: transactionReceipt.packageName, productId: transactionReceipt.productId, transactionId: purchase.transactionId ?? ”, purchaseTime: purchase.purchaseTime || Date.now(), platform: Platform.OS, test: test, }; try { const response = await axios.post(‘/api/compras’, compra); if (response.data === 1) { console.log(‘Purchase validated and recorded successfully’); setLoading(false); return true; } else { console.error(‘Server validation failed:’, response.data); return false; } } catch (error) { console.error(‘Error recording purchase:’, error); return false; } }; const updateLocalState = async (productId) => { // Actualizar estado local if (productosSolicitados.includes(productId)) { const monedas = productId.split(‘.’)[1]; setCreditos(creditos + parseInt(monedas)); } }; return ( useState para manejar los estados de las variables products, loading y error.* He utilizado el hook useEffect para cargar los productos desde el servidor al componente renderizar.* He agregado un try-catch en la función handlePurchase para manejar cualquier error que pueda ocurrir durante la solicitud de compra o validación.* He utilizado el hook axios.post para enviar la compra al servidor y validar su validez.* He actualizado el componente para utilizar el objeto ComprasIAP_Obj y los estados correspondientes.* He utilizado el estilo StyleSheet.create para definir el estilo del componente.Espero que esto te ayude. ¡Si tienes alguna pregunta o necesitas más ayuda, no dudes en preguntar!
You have an example of how to validate a purchase using Python. I recommend validating purchases, although it is not obligatory.
To validate purchases in the back: https://devcodelight.com/validar-compras-en-aplicacion-android-usando-python/
O an example of how to validate a purchase in iOS using PHP: https://devcodelight.com/validar-compra-en-aplicacion-compras-in-app-de-ios-usando-php/
