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)

The information for the payment being created.

paymentInfo

PaymentInfo

Creates a new payment.

Before using the createPayment() function, you need to set up your site to
 accept payments. To learn more, see [About Accepting Payments](https://support.wix.com/en/article/about-accepting-payments).
 When setting up your site to accept payments, be sure to select the payment
 methods you want to offer and [set your payment currency](https://support.wix.com/en/article/setting-your-currency-for-accepting-payments).

 The `createPayment()` function returns a Promise that resolves to a `Payment`
 object when the payment has been created.

 Creating a payment is the first step in the process of accepting a payment from
 a user. After creating the payment, call [`startPayment()`](wix-pay-frontend/start-payment)
 from your site's client-side code using the payment ID returned by `createPayment`.
 The [`startPayment()`](wix-pay-frontend/start-payment) function prompts the user
 to select a payment method and continue the payment process.

 To understand how `createPayment()` is used in a typical payment lifecycle,
 see [Typical Payment Lifecycle](wix-pay-backend/introduction#typical-payment-lifecycle).

 > **Note:**
 > - To work with the Pay API, you need to save and publish your site.
 > - For security reasons you should always create the `PaymentInfo` object in backend code. Do not pass payment information from client-side code. Doing so opens a vulnerability that a malicious user can exploit to change payment information, such as the price of an item being purchased.
 > - To learn more about how to keep your payment code secure, see [Security Considerations When Working with Wix Code](https://support.wix.com/en/article/security-considerations-when-working-with-wix-code#code-visibility).

/**************************
 * Backend code - pay.jsw *
 **************************/

import wixPayBackend from 'wix-pay-backend';

export function createMyPayment() {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99
  });
}

/********************
 * Client-side code *
 ********************/

import { createMyPayment } from 'backend/pay';
import wixPay from 'wix-pay';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPay.startPayment(payment.id);
    });
}

Create a new payment

/**************************
 * Backend code - pay.jsw *
 **************************/

import wixPayBackend from 'wix-pay-backend';

export function createMyPayment() {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99,
      quantity: 2
    }],
    amount: 19.98
  });
}

/********************
 * Client-side code *
 ********************/

import { createMyPayment } from 'backend/pay';
import wixPay from 'wix-pay';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPay.startPayment(payment.id);
    });
}

Create a new payment using quantity

/**************************
 * Backend code - pay.jsw *
 **************************/

import wixPayBackend from 'wix-pay-backend';

export function createMyPayment(userInfo) {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99,
      quantity: 2
    }],
    amount: 19.98,
    userInfo
  });
}

/********************
 * Client-side code *
 ********************/

import { createMyPayment } from 'backend/pay';
import wixPay from 'wix-pay';

export function myButton_click(event, $w) {
  const firstName = // the user's first name
  const lastName = // the user's last name
  const phone = // the user's phone number
  const email = // the user's email address
  const countryCode = // the user's country code

    createMyPayment({ firstName, lastName, phone, email, countryCode })
      .then((payment) => {
        wixPay.startPayment(payment.id);
      });
}

Create a new payment with user information

/**************************
 * Backend code - pay.jsw *
 **************************/

import wixPayBackend from 'wix-pay-backend';

export function createMyPayment() {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99,
    currency: "USD"
  });
}

/********************
 * Client-side code *
 ********************/

import { createMyPayment } from 'backend/pay';
import wixPay from 'wix-pay';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPay.startPayment(payment.id);
    });
}

Create a new payment with custom currency

/**************************
 * Backend code - pay.jsw *
 **************************/

import wixData from 'wix-data';
import wixPayBackend from 'wix-pay-backend';

export async function createMyPayment(productId) {
  return wixData.get("productCollection", productId)
    .then((product) => {
      return wixPayBackend.createPayment({
        items: [{
          name: product.name,
          price: product.price
        }],
        amount: product.price
      });
    });
}

/********************
 * Client-side code *
 ********************/

import { createMyPayment } from 'backend/pay';
import wixPay from 'wix-pay';

export function myButton_click(event, $w) {
  createMyPayment(event.context.itemId)
    .then((payment) => {
      wixPay.startPayment(payment.id);
    });
}

Create a new payment using collection data

Create a new payment using collection data and a quantity

createPayment

Payment

# Introduction
To process payments on your site, first set up your site to accept payments
 as described in [About Accepting Payments](https://support.wix.com/en/article/about-accepting-payments).
 When setting up your site to accept payments, be sure to select the payment
 methods you want to offer and [set your payment currency](https://support.wix.com/en/article/setting-your-currency-for-accepting-payments).
You can also set up a list of alternative currencies to display your prices in. Use the [Currency API](wix-pay-backend/currencies) and the [currency conversion dropdown element](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores) to set up and display product prices in different currencies.

 ### Typical Payment Lifecycle

 The following list outlines the steps taken in a typical payment lifecycle:

 1. A site visitor clicks a button to start the payment process.
 1. The button's event handler calls a backend function.
 1. A `PaymentInfo` object containing information about
    the payment, such as the payment amount, is created in the backend function.
 1. The backend function calls [`createPayment()`](wix-pay-backend/create-payment) using the
    `PaymentInfo` object and returns the generated
    `Payment` object to the calling client-side event handler.
 1. The event handler then calls the [`startPayment()`](wix-pay-frontend/start-payment)
    function with the id from the `Payment` object, which opens
    the payment popup on your site.
 1. The site visitor enters the payment information.
 1. The event handler optionally handles the returned `PaymentResult`.
 1. Handle additional status updates to the payment transaction using the
    [`onPaymentUpdate()`](wix-pay-backend/events/on-payment-update) event.

 To use the Pay API, import `wixPayBackend` from the `wix-pay-backend` module:

   ```javascript
   import wixPayBackend from 'wix-pay-backend';
   ```

> **Note:** To work with the Pay API, you need to save and publish your site.

velo_wix-pay-backend

Gets the list of all currencies for which Wix supports conversion.

The `getAllCurrencies()` function returns a Promise that resolves to an array of currencies.
The array lists all currencies for which Wix supports conversion and their symbols.

> **Notes:**
> - The `getAllCurrencies()` function is different from [`siteSettings.getCurrencies()`](wix-pay-backend/currencies/site-settings/get-currencies) in that this function gets the complete list of all of the currencies that are supported on Wix sites.
> - The [`siteSettings.getCurrencies()`](wix-pay-backend/currencies/site-settings/get-currencies) function gets only the currencies that have been set for use in your site using the [`siteSettings.setCurrencies()`](wix-pay-backend/currencies/site-settings/set-currencies) function.

getAllCurrencies

Fulfilled - The list of all supported currencies.

# Introduction
The Currency API is used to convert from one currency to another, get exchange rates, and manage the currencies you want to work with on your site. The API can be used with the [currency conversion dropdown](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores) element on your Wix Stores page to display prices in a range of different currencies.
Selecting a different currency from the dropdown on a Wix Stores page, automatically updates all of the prices displayed on your store's page to the selected currency. While the currency converter dropdown works with your Wix Stores pages, the Currencies API can be used on any page.
Currency rates are provided by [XE](https://www.xe.com/company/) and are updated on a daily basis. Rates are provided together with the timestamp when they were set.

 The currency API contains the following objects:

 + Currencies
	  - Use [`getAllCurrencies()`](wix-pay-backend/currencies/get-all-currencies) to get a list of all the convertible currencies.


 + CurrencyConverter
   - Use [`convertAmounts()`](wix-pay-backend/currencies/currency-converter/convert-amounts) to convert amounts between two currencies.
   - Use [`getConversionRate()`](wix-pay-backend/currencies/currency-converter/get-conversion-rate) to get today’s conversion rate for a pair of currencies.


 + SiteSettings
   - Use [`setCurrencies()`](wix-pay-backend/currencies/site-settings/set-currencies) to set the currencies to appear in your currency conversion dropdown.
   - Use [`getCurrencies()`](wix-pay-backend/currencies/site-settings/get-currencies) to see the list of the currencies that you set.


 To use the Currencies API you must upgrade your site to a [Premium Plan](https://support.wix.com/en/article/upgrading-your-site-to-premium-3066683).

> **Notes:**
> - The currency converter changes the displayed prices in your store for different currencies but does not change the payment currency.
> - The payment is always made in the [currency set in your site's dashboard](https://support.wix.com/en/article/setting-your-currency-for-accepting-payments).
> - By using these objects you agree to XE's [Terms of Use.](https://www.xe.com/en/legal/dfs.php)

Currencies

CurrencyConverter

SiteSettings

Gets conversion rates and converts amounts.

Use the CurrencyConverter object to get the currency conversion rates for any pair of supported currencies. You can also convert an array of amounts from one currency to another.
The exchange rates are provided by [XE](https://www.xe.com/company/) on a daily basis and include the timestamp when they were set.

currencyConverter

Gets and sets currencies that you want to support on your site.

You can set the currencies that you want your site to support. These are the currencies that are displayed in the [currency conversion](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores) element and used to convert currencies in your Wix Store.

The currency codes used must exist in the array returned by the [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies) function.

> **Note:** For SiteSettings functions to work, your site must contain a Wix Stores page including the [currency conversion element](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores).

siteSettings

An event that fires when a payment's transaction status is changed.

The `onPaymentUpdate()` event handler runs when a payment's transaction status has changed.
 The received `PaymentUpdateEvent`
 object contains information about the payment transaction.

 > **Note:** Backend events don't work when previewing your site.

onPaymentUpdate

void

# Introduction
Wix Payments events are fired in you site's backend when certain events occur with payments created using the Pay API.
 You can write event handlers that react to these events. Event handler functions
 receive data that corresponds to the event that has occurred. Use event handlers
 to create custom responses to payment events.

 Note that backend events don't work when previewing your site.

 To add a payment event handler, add an **events.js** file to the **Backend** section
 of your site if one does not already exist. All event handler functions for your
 site are defined in this file.

 Event handler functions are defined using the following pattern:

 ```javascript
 export function <wixAppName>_<eventName>(event) { }
 ```

 For example, an event handler that handles payment updates looks
 like this:

 ```javascript
 export function wixPay_onPaymentUpdate(event) { }
 ```

Events

Contains functionality for displaying prices in your store in different currencies, getting exchange rates, and converting between currencies.

To use the currencies functionality you must upgrade your site to a [Premium Plan](https://support.wix.com/en/article/upgrading-your-site-to-premium-3066683).

Currencies objects are used to convert from one currency to another, get exchange rates, and manage the currencies you want to work with on your site. The objects can be used with the [currency conversion dropdown](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores) element on your Wix Stores page to display prices in a range of different currencies. Selecting a different currency from the dropdown on a Wix Stores page, automatically updates all of the prices displayed on your store's page to the selected currency. While the currency converter dropdown works with your Wix Stores pages, the Currencies objects can be used on any page.
Currency rates are provided by [XE](https://www.xe.com/company/) and are updated on a daily basis. Rates are provided together with the timestamp when they were set.

 The currency API contains the following objects:

 + Currencies
	  - Use [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies) to get a list of all the convertible currencies.


 + CurrencyConverter
   - Use [`convertAmounts()`](wix-pay-backend/currencies/currency-converter/convert-amounts) to convert amounts between two currencies.
   - Use [`getConversionRate()`](wix-pay-backend/currencies/currency-converter/get-conversion-rate) to get today’s conversion rate for a pair of currencies.


 + SiteSettings
   - Use [`setCurrencies()`](wix-pay-backend/currencies/site-settings/set-currencies) to set the currencies to appear in your currency conversion dropdown.
   - Use [`getCurrencies()`](wix-pay-backend/currencies/site-settings/get-currencies) to see the list of the currencies that you set.


> **Notes:**
> - The currency converter changes the displayed prices in your store for different currencies but does not change the payment currency.
> - The payment is always made in the [currency set in your site's dashboard](https://support.wix.com/en/article/setting-your-currency-for-accepting-payments).
> - By using these objects you agree to XE's [Terms of Use.](https://www.xe.com/en/legal/dfs.php)

currencies

Currency

A 3-letter
 [ISO-4217](https://en.wikipedia.org/wiki/ISO_4217) currency code.

code

string

symbol

ConversionRate

The conversion rate between the source and target currencies.

rate

number

timestamp

ConvertAmountsOptions

amounts

Currency to convert from.  The `from` currency code used must exist in the array returned by the [`getAllCurrencies()`](wix-pay-backend/currencies/get-all-currencies) function.

from

Currency to convert to. The `to` currency code used must exist in the array returned by the [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies) function.

> **Note:** The `from` and `to` currency codes used must exist in the array returned by the [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies) function.

ConvertedAmounts

The date and time when the currency exchange rate was set.

Converts an array of one or more amounts from one currency to another.

Use the `convertAmounts()` function to convert an array of one or more amounts between two currencies.
The `convertAmounts()` function returns a Promise that resolves to a `ConvertedAmounts` object which contains an array of converted amounts and the timestamp for the conversion rate used.

> **Note:**  The currency codes used must exist in the array returned by the [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies) function.

convertAmounts

Fulfilled - The converted amounts and the timestamp for the conversion rate.

Gets a currency conversion rate.

The `getConversionRate()` function returns a Promise that resolves to a `ConversionRate` object, which contains the currency conversion rate between two currencies. The exchange rates are provided by [XE](https://www.xe.com/company/) on a daily basis and include the timestamp when they were set.

> **Note:** By using this function you agree to XE's [Terms of Use.](https://www.xe.com/en/legal/dfs.php)

getConversionRate

Fulfilled - The conversion rate between the source and target currencies and
the timestamp when the rate was set.

CurrencyCode

Gets the list of supported currencies that you set for your site.

The `getCurrencies()` function returns a Promise that resolves to an array of currencies that were set for use in the site using [`siteSetting.setCurrencies()`](wix-pay-backend/currencies/site-settings/set-currencies).
This function is different from the [`getAllCurrencies()`](wix-pay-backend/currencies/get-all-currencies) function in that it gets only the currencies that have
been set for use in  this site using the [`siteSetting.setCurrencies()`](wix-pay-backend/currencies/site-settings/set-currencies) function.
The [`getAllCurrencies()`](wix-pay-backend/currencies/get-all-currencies) function gets the complete list of all of the currencies that can be supported.

> **Note:** For SiteSettings functions to work, your site must contain a Wix Stores page including the [currency conversion element](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores).

getCurrencies

Fulfilled - The list of all currencies set for this site.

Sets the list of currencies that the site will support.

The `setCurrencies()` function sets the list of currencies that you want your site to support. This is a subset of the list of currencies supported by Wix as returned by [`getAllCurrencies()`](wix-pay-backend.Currencies.html#getAllCurrencies). The currencies set will be displayed in the [currency conversion dropdown element](https://support.wix.com/en/article/adding-and-setting-up-a-currency-converter-in-wix-stores). Selecting a currency from the dropdown on a store page will display the prices in the selected currency.

setCurrencies

PaymentUpdateEvent

payment

Payment status.
 One of:

 + `"Successful"`
 + `"Pending"`
 + `"Failed"`
 + `"Chargeback"`
 + `"Refunded"`
 + `"Offline"`
 + `"PartiallyRefunded"`
 + `"Cancelled"`
 + `"Undefined"`

status

transactionId

userInfo

PaymentUserInfo

amount

Payment currency. A three-letter
 [ISO-4217](https://en.wikipedia.org/wiki/ISO_4217) currency code.

currency

items

An object representing information about the user.

Total payment amount. Must equal
 the sum of the `price` properties in the `items` list while taking the
 `quantity` into account.

Payment currency. A three-letter
 [ISO-4217](https://en.wikipedia.org/wiki/ISO_4217) currency code. Defaults to
 the currency defined by the site's [Regional Settings](https://support.wix.com/en/article/changing-your-sites-regional-settings).

An object representing information about the user. It will be used to prefill
 the user info form during the payment process.

PaymentItem

name

price

quantity

User's country code. A three-letter
 [ISO-3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) country code. Value
 is `null` if there is no country information.

countryCode

User's email address. Value is `null` if
 there is no email address information.

email

User's first name. Value is `null` if
 there is no first name information.

firstName

User's last name. Value is `null` if
 there is no last name information.

lastName

User's phone number. Value is `null` if
 there is no phone number information.