Cómo mostrar productos y suscripciones con StoreKit

Marcelo Laprea

14 agosto, 20244min de lectura

Mostrar productos o suscripciones con StoreKit es muy sencillo. Solo necesitamos usar las vistas proporcionadas por Apple, como ProductView y SubscriptionStoreView. Sin embargo, antes de mostrar nuestros productos, debemos crearlos. Para ello, pueden seguir esta guía para crear un archivo de configuración de StoreKit y así poder probar nuestros productos.

Perfecto, ya debes tener tu archivo de configuración creado. Ahora llegó la hora de mostrar nuestros productos, ¡vamos a ello!

Mostrando subscripciones

La vista SubscriptionStoreView ofrece dos inicializadores: uno utilizando un arreglo de ProductsID y otro usando un GroupID.

Usando el GroupID para inicializar la vista

Para obtener el GroupID, vamos al archivo de configuración de StoreKit. Dentro del grupo que creamos, en nuestro caso "AsyncLearnPro", encontraremos el GroupID, que usaremos para inicializar la vista.

import SwiftUI
// 1
import StoreKit

struct ContentView: View {
    var body: some View {
        // 2
        SubscriptionStoreView(groupID: "DBBBBB20")
    }
}

1. Lo primero que hacemos es importar StoreKit.
2. Luego creamos la vista SubscriptionStoreView usando el groupID que encontramos previamente.

Y así tenemos nuestra vista con las dos suscripciones creadas.

Usando los ProductsID para inicializar la vista

Para obtener los ProductsID, vamos al archivo de configuración de StoreKit y, dentro de cada producto, veremos el ProductID, que usaremos para inicializar la vista.

import SwiftUI
// 1
import StoreKit

struct ContentView: View {
    var body: some View {
        // 2
        SubscriptionStoreView(productIDs: ["com.asynclearn.monthly", "com.asynclearn.yearly"])
    }
}

1. Importamos StoreKit.
2. Luego creamos la vista SubscriptionStoreView usando un arreglo de productIDs que encontramos previamente.

Hemos visto lo sencillo que es mostrar las suscripciones en nuestra app. Ahora, veamos cómo darles un poco de estilo.

Estilos de control para el SubscriptionStoreView

Para darle estilo al SubscriptionStoreView, usamos el modificador subscriptionStoreControlStyle. Hay 6 estilos en total; veamos cómo usarlos:

Estilo .buttons

SubscriptionStoreView(productIDs: ["com.asynclearn.monthly", "com.asynclearn.yearly"])
    .subscriptionStoreControlStyle(.buttons)

Estilo .picker

.subscriptionStoreControlStyle(.picker)

Estilo .prominentPicker

.subscriptionStoreControlStyle(.prominentPicker)

Estilo .compactPicker

.subscriptionStoreControlStyle(.compactPicker)

Estilo .pagedPicker

.subscriptionStoreControlStyle(.pagedPicker)

Estilo .pagedProminentPicker

.subscriptionStoreControlStyle(.pagedProminentPicker)

¡Ahora te toca a ti decidir qué estilo usar!

Mostrando productos

Ya vimos cómo mostrar suscripciones. Ahora, veamos cómo mostrar productos. Lo primero que debemos hacer es crear un producto consumible o no consumible, tal como creamos las suscripciones en esta guia.

import SwiftUI
// 1
import StoreKit

struct ContentView: View {
    var body: some View {
        // 2
        ProductView(id: "com.asynclearn.product1")
    }
}

1. Importamos StoreKit.
2. Creamos el ProductView con el identificador de nuestro producto. De momento no existe un inicializador al que podamos pasarle un arreglo de identificadores, así que debemos usar ForEach para mostrar distintos productos.

ForEach(["com.asynclearn.product1", "com.asynclearn.product2"], id: \.self) { id in
    ProductView(id: id)
}

Vemos que el diseño no es el mejor, así que exploremos los diferentes estilos de control.

Estilos de control para el ProductView

Para darle estilo al ProductView, usamos el modificador productViewStyle. Hay 3 estilos en total, veamos cómo usarlos:

Estilo .compact

ProductView(id: id)
    .productViewStyle(.compact)

Estilo .large

ProductView(id: id)
    .productViewStyle(.large)

Estilo .regular

ProductView(id: id)
    .productViewStyle(.regular)

Ahora sabes cómo mostrar tanto suscripciones como productos con ProductView y SubscriptionStoreView, además de cómo aplicar diferentes estilos de control. La elección de estilos queda en tus manos. En futuros artículos, exploraremos más opciones para personalizar estas vistas.