Módulo de consumo en VTEX

Configuración Cliente ⚙️

Desde el módulo PCI-Gateway de VTEX debes configurar:

1. Afiliación llamada Gift Card (nuevo).

2. Ir a Planes de pago y configurar el plan de pago llamado Vale.

Configuración Cliente y Agencia ⚙️

Desde el checkout de VTEX se mostrará un solo campo:

Este es el comportamiento por defecto del e-commerce que ofrece VTEX. Para realizar pruebas es posible ingresar concatenados en ese campo Nro de Gift Card (16 dígitos) + Cód. Seguridad (3 dígitos) y con eso la operación funcionará correctamente.

Para pasar a nivel productivo, sin embargo, se recomienda modificar el front de manera que ese único campo quede dividido en dos. Uno para el número de tarjeta y otro para el código de seguridad. Luego, por javascript, juntar esos dos datos y concatenarlos a la hora de hacer la llamada o submit. Esta modificación requiere verificación con VTEX.

Configuración VTEX ⚙️

Es necesario hacer un llamado PUT a la siguiente API de VTEX para que la integración entre el Gift Card Hub de VTEX y los servicios de Oh! Gift Card queden configurados correctamente.

Es obligatorio para esto que Oh! Gift Card provea un endpoint para incluir en la configuración.

Formato de llamada a la API de VTEX

URL:

Copy
https:// [accountName].vtexcommercestable.com.br/api/giftcardproviders/ohgiftcard

Headers:

Copy
Content-Type: application/vnd.vtex.giftcardproviders.v1+json
Accept: application/vnd.vtex.giftcardproviders.v1+json
X-VTEX-API-AppKey:
X-VTEX-API-AppToken:

Body:

Copy
{
 "id": "ohgiftcard",
 "serviceUrl": "https://demo.ohgiftcard.com/vtex/[tiendaId]",
 "oauthProvider": "vtex",
 "caption": "oh Gift Card",
 "preAuthEnabled": true,
 "cancelEnabled": true,
 "_self": {
"href": "[accountName]/giftcardproviders/ohgiftcard"
 }
}

Donde:

• serviceUrl: es la URL del endpoint por la cual VTEX va a enviar los requests a Oh! Gift Card.
• oauthProvider: no se utiliza oauthProvider externo así que hay que dejar como vtex.
• caption: oh Gift Card.
• preAuthEnabled y cancelEnabled: siempre iguales a true (si bien el flujo con preAuth no funciona hoy en día).
• _self = {"href": "[accountName]/giftcardproviders/ohgiftcard"} es el endpoint de integración con el sistema de Gift Card Hub nativo de VTEX donde el valor [accountName] debe ser reemplazado por el nombre del ambiente del cliente.
• tiendaId: id de la tienda asignado por Oh! Gift Card.
• X-VTEX-API-AppKey: provisto por VTEX a la marca.
• X-VTEX-API-AppToken: provisto por VTEX a la marca.

Una vez armado el request y ejecutado contra la API de VTEX indicada en este punto habrá quedado configurada la cuenta para que cada vez que se haga checkout del pago con Gift Card en el e-commerce se impacte la operación contra el servicio de Oh! Gift Card.

A continuación, se indica cómo configurar el ambiente Demo en el campo serviceUrl.

💡 Al momento de pasar a producción se deberá solicitar la URL definitiva a oh! Gift Card.

Configuración cliente Postman para llamada a la API de VTEX ⚙️

1. Descargar Postman desde el sitio web oficial.
2. Crear un request.
3. Configurar los headers antes mencionados.

4. Configurar el body de la llamada.

Reemplazando los valores entre llaves {{ }} por los mencionados en el apartado Configuración VTEX y presionando Send debería efectuarse la llamada y, si todo va bien, en el apartado Response obtendremos un Status 200 (OK).

Con esto ya habrá quedado configurada la integración Gift Card Hub - Oh Gift Card correctamente 🔥.