Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

code

string

options

GetGiftCardOptions

import { giftVouchers } from '@wix/ecom';

async function getGiftCard(code, options) {
  const response = await giftVouchers.getGiftCard(code, options);
};

getGiftCard: Wix-hosted

import { createClient } from '@wix/sdk';
import { giftVouchers } from '@wix/ecom';
// Import the auth strategy for the relevant access type
// Import the relevant host module if needed

const myWixClient = createClient ({
  modules: { giftVouchers },
  // Include the auth strategy and host as relevant
});


async function getGiftCard(code, options) {
  const response = await myWixClient.giftVouchers.getGiftCard(code, options);
};

Self-hosted SDK calls require you to [create a client](https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-the-wix-client).

getGiftCard: Self-hosted

getGiftCard

Read Gift Cards

GetGiftCardResponse

Field options. `amount` and `appId` **must** be passed.

RedeemGiftCardOptions

Redeems a gift card.
Creates a transaction and lowers the card balance by the transaction amount.

import { giftVouchers } from '@wix/ecom';

async function redeemGiftCard(code, options) {
  const response = await giftVouchers.redeemGiftCard(code, options);
};

redeemGiftCard: Wix-hosted

import { createClient } from '@wix/sdk';
import { giftVouchers } from '@wix/ecom';
// Import the auth strategy for the relevant access type
// Import the relevant host module if needed

const myWixClient = createClient ({
  modules: { giftVouchers },
  // Include the auth strategy and host as relevant
});


async function redeemGiftCard(code, options) {
  const response = await myWixClient.giftVouchers.redeemGiftCard(code, options);
};

redeemGiftCard: Self-hosted

redeemGiftCard

Change Gift Card Balances

RedeemGiftCardResponse

Gift card transaction ID, as returned from Redeem Gift Card.

transactionId

Field options. `appId` **must** be passed.

VoidTransactionOptions

Voids a gift card transaction.
Transaction IDs are returned in Redeem Gift Card.

import { giftVouchers } from '@wix/ecom';

async function voidTransaction(transactionId, options) {
  const response = await giftVouchers.voidTransaction(transactionId, options);
};

voidTransaction: Wix-hosted

import { createClient } from '@wix/sdk';
import { giftVouchers } from '@wix/ecom';
// Import the auth strategy for the relevant access type
// Import the relevant host module if needed

const myWixClient = createClient ({
  modules: { giftVouchers },
  // Include the auth strategy and host as relevant
});


async function voidTransaction(transactionId, options) {
  const response = await myWixClient.giftVouchers.voidTransaction(transactionId, options);
};

voidTransaction: Self-hosted

voidTransaction

void

# About the Wix eCommerce Gift Vouchers API

The Wix eCommerce Gift Vouchers API enables clients to perform various operations related to gift cards, including retrieving gift card data, applying gift card balances to purchases, 
and voiding previously redeemed transactions.

<blockquote class="important">
  <strong>Important:</strong>
  
The Wix eCommerce Gift Cards API is exposed here as the Wix eCommerce Gift Vouchers API due to npm package limitations. Individual methods will refer to gift cards rather than gift vouchers.
</blockquote>

## Before you begin
- Redeem and Void actions require the `appId` of the gift card provider, as returned in [Get Checkout](https://dev.wix.com/docs/sdk/backend-modules/ecom/checkout/get-checkout) `giftCard.appId` or [List Transactions for Single Order](https://dev.wix.com/docs/sdk/backend-modules/ecom/order-transactions/list-transactions-for-single-order) `payments.giftcardPaymentDetails.appId`. 
- For these APIs to function, a gift card provider must be integrated into the site. This integration can be achieved by any of the following:
  - Marking your app as [dependent](https://dev.wix.com/docs/build-apps/launch-your-app/market-listing/add-your-app-audience-info) on Wix Stores, Wix Bookings, or Wix Restaurants, which blocks the installation of your app and prompts users to install the required app first.
  - Making your app dependent on a third-party app that implements the Service Plugin, such as [Gifted](https://www.wix.com/app-market/gifted). There is currently no way to block installation on sites that don't have the third-party app installed, or to check that a site has installed the required app.
  - Building your own app that implements the [Wix eCommerce Gift Cards Service Plugin](https://dev.wix.com/docs/sdk/backend-modules/ecom/service-plugins/gift-vouchers-provider/introduction).

## Terminology
- **Redeem**: Applying a gift card balance to a purchase, including subtracting the applied value from the gift card balance.
- **Void**: Reversing a redeem action and returning the applied value to the gift card balance.


To use the GiftVouchers API, install the `@wix/ecom` package using npm or Yarn:
  ```console
npm install @wix/ecom
```

or

```console
yarn add @wix/ecom
```

Then import `{ giftVouchers }` from `@wix/ecom`:

```js
import { giftVouchers } from '@wix/ecom'
```
  

ecom_gift-vouchers

Context

Physical location ID. Can be based on the Locations API or an external provider.

locationId

Contextual information for the request, including the physical location ID if applicable.

context

giftCard

GiftCard

App ID of the gift card provider, as returned in eCommerce Get Checkout or List Transactions for Single Order.

appId

balance

Money

External ID in the gift card provider's system.
Used for integration and tracking across different platforms.

externalId

Gift card obfuscated code.

For example: "****-****-****-1234".

obfuscatedCode

Current gift card status. Supported values:
+ **VALID**: Gift card is active and can be used for purchases.
+ **EXPIRED**: Gift card expiration date has passed and can no longer be used.
+ **DISABLED**: Gift card has been disabled by the merchant and can no longer be used.

status

Status

Currency code. Must be valid ISO 4217 currency code (e.g., USD).

currency

Monetary amount. Decimal string with a period as a decimal separator (e.g., 3.99). Optionally, a single (-), to indicate that the amount is negative.

value

amount

Order ID to apply the gift card transaction, when applying a gift card after order creation. Order ID can be collected from the eCommerce Order Created webhook or by calling eCommerce Search Orders.