Documentation
Feedback
Guides

How do gift cards work?

Before developing your gift card provider implementation, it's important to clearly understand the data structures and the behaviors expected by Gift Card Hub. In most cases, developers will need to map the data structures and behaviors exhibited by external gift card providers and create parsing routines in their middleware to switch back and forth between standards.

Gift Card Provider

A gift card provider is an external system that manages gift cards and their transactions.

The minimum information needed to define a provider includes:

  • id: the provider identifier in the context of Gift Card Hub API
  • caption: the name seen by shoppers in the store checkout
  • serviceUrl: the base URL that should be prepended to all provider endpoints
    {"base64":"  ","img":{"width":658,"height":286,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40555,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/gift-card-integration-guide-data-structures-0.png"}}
    Below you will find an example of the gift card provider data structure and more details on the usage of each parameter. Parameters that were not mentioned in our short description above can usually be set to the values in the example.

_11
{
_11
"id": "GiftCardExample",
_11
"serviceUrl": "https://giftcard--cosmetics2.myvtex.com/my-provider",
_11
"caption": "My Gift Card Provider",
_11
"oauthProvider": "vtex",
_11
"preAuthEnabled": true,
_11
"cancelEnabled": true,
_11
"_self": {
_11
"href": "cosmetics2/giftcardproviders/GiftCardExample"
_11
}
_11
}

NameTypeDescriptionRequired?
idstringGift card provider identifier for API requests
serviceUrlstringBase URL for all gift card provider middleware endpoints
captionstringGift card provider identifier in the store checkout
oauthProviderstringWebstore login provider identifier in VTEX ID, used to identify users in loyalty programs'vtex'
preAuthEnabledboolIndicates whether purchases using this gift card provider should be pre-authorizedtrue
cancelEnabledboolIndicates whether purchases using this gift card provider can be cancelledtrue
_selfobjectIndicates the relative path where this data structure can be found in Gift Card Hub, by appending the href parameter to https://api.vtex.com

Failing to define a valid oauthProvider will generate an error in your store's checkout. Most implementations should set this parameter to 'vtex'

Gift card

A gift card can work as either a redeemable gift voucher or a loyalty program. Although the data structure is the same, the required fields for each behavior are slightly different.

The minimum information needed to define a gift card includes:

  • id: the gift card identifier in the context of Gift Card Hub API
  • balance: the amount of credit available in the gift card
  • emissionDate: the date when the gift card starts being valid
  • expiringDate: the date when the gift card stops being valid

Loyalty program

When used as a redeemable gift voucher, you should also set:

  • caption: the gift card identifier in checkout

Below you will find an example of the gift card data structure for a loyalty program card. The provider and transaction fields are added by Gift Card Hub.


_11
{
_11
"id": "1",
_11
"balance": 100.0,
_11
"emissionDate": "2020-07-30T00:00:00Z",
_11
"expiringDate": "2030-07-30T00:00:00Z",
_11
"caption": "My Awesome Card 1",
_11
"provider": "GiftCardExample",
_11
"transaction": {
_11
"href": "cosmetics2/giftcardproviders/GiftCardExample/giftcards/1/transactions"
_11
}
_11
}

Redeemable voucher

When used as a redeemable gift voucher, you should also set:

  • redemptionCode: the gift card code in checkout

Below you will find an example of the gift card data structure for a redeemable gift voucher. The provider and transaction fields are added by Gift Card Hub.


_12
{
_12
"id": "2",
_12
"balance": 50.0,
_12
"emissionDate": "2020-07-30T00:00:00Z",
_12
"expiringDate": "2030-07-30T00:00:00Z",
_12
"caption": "My Awesome Card 2",
_12
"redemptionCode": "123456",
_12
"provider": "GiftCardExample",
_12
"transaction": {
_12
"href": "cosmetics2/giftcardproviders/GiftCardExample/giftcards/2/transactions"
_12
}
_12
}

Our default display for redeemable vouchers is simply the redemption code.

If you would like to present the caption as well, you will need to customize your checkout to display it by fetching that information from the paymentData available in the vtex.js orderForm object. All the parameters that can be set when creating gift cards are listed in the table below.

NameTypeDescription
idstringGift card identifier for API requests
balancenumberCredit available in gift card
emissionDatestringDate when the gift card starts being valid (ISO 8601 format)
expiringDatestringDate when the gift card stops being valid (ISO 8601 format)
captionstringGift card identifier in the store checkout that is displayed for loyalty programs
relationNamestringRelationship between the customer and the store
redemptionCodestringCode used in the store checkout to activate redeemable vouchers
redemptionTokenstringOptional code that can be used to validate redeemable vouchers (checkout customization required for user input)
providerstringGift card provider identifier for API requests
transactionobjectIndicates the relative path where the transactions for this gift card can be found in Gift Card Hub, by appending the href parameter to https://api.vtex.com

Some fields are shown in the order details page when gift cards are used to pay for an order:

  • Code: redemptionCode
  • Name: relationName
  • Caption: caption
  • Gift Card Issuer: provider

The image below illustrates how these might be presented in a specific order.

{"base64":"  ","img":{"width":256,"height":545,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40596,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/gift-card-integration-guide-data-structures-1.png"}}

Transactions

A gift card transaction is a record of an operation that changes the gift card balance as a side-effect, such as a purchase or a refund. Our protocol expects gift cards to store their transactions for bookkeeping throughout the different stages of the purchase process.

The minimum information needed to define a transaction includes:

  • operation: indicates whether credit should be added (Credit) or redeemed (Debit)
  • value: the amount of credit that should be added or redeemed
  • date: the date when the transaction occurred

Once a transaction is created, the gift card provider should allow our payments gateway to interact with the typical operations seen in the transaction flow:

  • Authorization: provider verifies payment details and reserves the funds for capture
  • Settlement: provider captures the funds for an authorized payment
  • Cancellation: provider rejects the payment and reserved funds are released

Below you will find an example of the gift card transaction data structure and more details on the usage of each parameter. Parameters that were not mentioned in our short description above can usually be set to the values in the example.


_16
{
_16
"value": 254.98,
_16
"description": "Recarga de Gift Card",
_16
"redemptionMode": "6392472000000066891",
_16
"date": "2020-09-30T16:20:57",
_16
"settlement": {
_16
"href": "rihappy/giftcardproviders/safe/giftcards/6392472000000066891/transactions/112172/settlements"
_16
},
_16
"cancellation": {
_16
"href": "rihappy/giftcardproviders/safe/giftcards/6392472000000066891/transactions/112172/cancellations"
_16
},
_16
"authorization": {
_16
"href": "rihappy/giftcardproviders/safe/giftcards/6392472000000066891/transactions/112172/authorization"
_16
},
_16
"operation": "Credit"
_16
}

When gift card transactions are listed for a specific gift card, Gift Card expects a minimal list including only the transaction IDs and references paths where full details can be found for each gift card. This allows for better performance.


_14
[
_14
{
_14
"id": "112172",
_14
"_self": {
_14
"href": "rihappy/giftcardproviders/safe/giftcards/6392472000000066891/transactions/112172"
_14
}
_14
},
_14
{
_14
"id": "112173",
_14
"_self": {
_14
"href": "rihappy/giftcardproviders/safe/giftcards/6392472000000066891/transactions/112173"
_14
}
_14
}
_14
]

If your gift cards need code or not, it's all about how you implement your search endpoint. Our native provider requires redemption code and sometimes document (if restricted)

Loyalty program: list is fine

Gift Voucher: redemption code must return only one gift card

Checkout validates data between search and get by id

NameTypeDescriptionRequired?
idYes
providerId
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page