Cómo: Configurar tu sitio web para utilizar las compras en la aplicación

Actualizado el 18. febrero 2024 por Jan Bunk


Crear productos para compras en la aplicación

Puedes seguir estas guías para crear productos de compra en la aplicación y suscripciones:

Es posible que se te pida que introduzcas alguna información adicional para habilitar los pagos en tu cuenta de desarrollador.

Como tendrás que crear un producto de compra en la aplicación en cada plataforma, asegúrate de que utilizas el mismo ID de producto en ambas plataformas, para que sea más fácil activar la compra en la aplicación a través de JavaScript (ver más abajo).

Activar una compra en la aplicación

En primer lugar, lo más probable es que quieras comprobar si el usuario actual está utilizando tu aplicación, porque un usuario habitual del navegador no podrá realizar compras dentro de la aplicación.

Puedes utilizar getAppPlatform() != null con el script de ayuda de la aplicación.

Luego, si el usuario está utilizando tu aplicación, puedes utilizar el siguiente JavaScript para activar una compra en la aplicación.

Quizá quieras consultar la función executeWhenAppReady() de nuestro script de ayuda de la aplicación. Garantiza que tu sitio web no intente interactuar con la aplicación antes de que esté lista o cuando tu sitio web se cargue utilizando un navegador normal (ReferenceError, function is not defined).

<script>
    try {
        // productId is the ID you specified for the in app purchase product in App Store Connect and the Google Play Console
        // consumable is a boolean value that indicates whether the product can be purchased multiple times (consumable==true) or just once (consumable==false)
        // subscriptions should use consumable==false
        // userIdentifier can be any string that identifies the current user.
        // The userIdentifier will be sent to your server's unlocking endpoint if the purchase is successful (so you can then unlock the product that was bought on your server)
        resultingStatus = await makeInAppPurchase(productId, consumable, userIdentifier)["status"];
        
        switch (resultingStatus) {
            case "failed":
                // The purchase failed, for example due to an error while verifying the purchase
                break;
            case "canceled":
                // The user canceled the purchase, for example by pressing the back button
                break;
            case "completed":
                // The purchase was successful
                break;
        }
    } catch (e) {
        // Some kind of error occurred, e.g. the given productId is invalid
    }
</script>
    

Mientras esperas la función, el usuario estará en una pantalla proporcionada por la app. La función de JavaScript se devolverá una vez que la compra se haya completado para que puedas recargar la página o actualizar la interfaz de usuario como consideres necesario. Una vez que el usuario cierre la pantalla nativa de la app, volverá a tu sitio web.

Una captura de pantalla de la app esperando a que se complete la compra dentro de la app.

Restaurar las compras en la aplicación

Quizá quieras consultar la función executeWhenAppReady() de nuestro script de ayuda de la aplicación. Garantiza que tu sitio web no intente interactuar con la aplicación antes de que esté lista o cuando tu sitio web se cargue utilizando un navegador normal (ReferenceError, function is not defined).

También puedes ofrecer una opción de "Restaurar compras" a tus usuarios.


<script>
    restorePurchases()
</script>
    

Normalmente, la restauración de las compras es necesaria cuando los usuarios desinstalan la aplicación y la vuelven a instalar en un nuevo dispositivo. Entonces pueden restaurar sus compras anteriores. Tú ya almacenas la información y las compras del usuario en tu servidor, que es independiente del dispositivo del usuario.

Seguimos ofreciéndote la oportunidad de integrar una funcionalidad de restauración de la compra con la esperanza de que pueda ser útil en otras circunstancias, por ejemplo, podría ayudar si algo sale mal mientras se verifica y desbloquea la compra de un usuario.

Próximos pasos

Después de que un usuario complete una compra en la aplicación, la compra tiene que ser verificada en un servidor y, si se verifica con éxito, los contenidos comprados deben ser desbloqueados en tu servidor.

Consulta tu configuración de compras en la aplicación para más información y guías.

Vista general de las compras en la aplicación