> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial: Using the Velo Pay API to Collect Payments for a Single Product

## Article: Using the Velo Pay API to Collect Payments for a Single Product

## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-using-the-velo-pay-api-to-collect-payments-for-a-single-product.md

## Article Content:

# Velo Tutorial: Using the Velo Pay API to Collect Payments for a Single Product



This article describes how you can use the Velo Pay API to collect payments from your site's visitors for a single predefined product, outside the context of a Wix App (like Wix Stores). This article is based on this [Wix Editor example site](https://velo-examples.wixsite.com/toystore). You can open the site in the Wix Editor to work with the [template](http://editor.wix.com/html/editor/web/renderer/new?siteId=5eb2ea3b-6527-4b5e-899a-bbf130adfab0&metaSiteId=146f29a1-b47c-4a03-acac-eb05894259ec).

>**Note:** 
> The example site and template are built on Wix Editor sites. This tutorial will be slightly different from the example site and template as its steps have been updated for a Wix Studio site with the [Wix Studio features](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md). 

To learn how to use the Velo Pay API for products stored in a collection, see [Velo: Using the Wix Pay API to Collect Payments for Products in a Database Collection](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-using-the-velo-pay-api-to-collect-payments-for-products-in-a-database-collection.md).

<div style="text-align:center">

<img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2018/11/20/d1091529-6d7f-473d-b48b-6cfe2f136191.png" style="max-width:30vw" />

</div>

### Overview

**In our site we added the following:**

*   Text elements and an image on the Pay API page, displaying a single product for sale.
*   A "Buy Now" button on the Pay API page, which visitors can click to purchase the product.

**Then we added code to do the following:**

1.  When a visitor clicks the "Buy Now" button, the button's event handler calls a backend function.
2.  The backend function creates and returns a payment object to the client side. The payment object contains payment information for the product as defined in the backend code.
3.  On the client side, a payment procedure is initiated using the ID from the payment object, causing a payment window to appear.
4.  The visitor enters payment information and completes the transaction.

### Before You Start

Before you start working with Wix payments in code, make sure you do the following:

*   Understand the [necessary security precautions](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-processing-payments.md) for working with payments in code. Specifically, make sure to always define payment information in the backend. This prevents malicious users from accessing and possibly manipulating payment information or the payment process.
*   Set up [accepted payment methods](https://support.wix.com/en/article/about-accepting-payments) on your site. We also recommend that you understand the [typical payment process](https://www.wix.com/velo/reference/wix-pay.html) before proceeding.

### Step 1: Set up the Pay API Page

On the Pay API page we added:

*   An image of the robot for sale.
*   Text elements for the name, price, and description of the robot.
*   A Buy Now button to trigger the payment process. In the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/adding-custom-interactivity-with-events.md) of the button, we added an onClick [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md).

    <img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2018/11/22/706af2c9-a2a2-4180-a8e5-38fd7eb26e44.png" style="max-width:30vw" />

### Step 2: Create the createPaymentForProduct Function in the Backend

We created a web module called `BE_PayAPI.web.js`. Then we imported the function that we need to work with payments in backend code, as well as the `webMethod` function and the `Permissions` enum from the `wix-web-module` module.

Then we declared the `createPaymentForProduct` function, which creates and returns a payment object. We also export the function so it can be used on the client side.

Note that `amount` is the sum of the `price` property for all `items`. In this example, there is only one `item` so `amount` and `price` are identical.

```javascript
import {Permissions, webMethod} from "wix-web-module";
import wixPayFrontend from 'wix-pay-backend';

export const createPaymentForProduct =  webMethod(Permissions.Anyone, () => {
  return wixPayFrontend.createPayment( {
    amount: 0.50,
    items: [{name: 'DIY Robot', price: 0.50}],
  } );
})
```

#### Understanding the Code

**Line 1**: Import the `webMethod` function and the `Permissions` enum from the `wix-web-module` module.
**Line 2**: Import the module we need to work with the [Wix Pay Backend](https://www.wix.com/velo/reference/wix-pay-backend.html) library.  
**Line 4**: Declare the `createPaymentForProduct` function, and export it with the `webMethod` function and `Permissions.Anyone` so it can be used on the client side. In the function, do the following:  
**Line 5**: Return the result of the [`wix-backend-pay`](https://www.wix.com/velo/reference/wix-pay-backend.html) [`createPayment`](https://www.wix.com/velo/reference/wix-pay-backend.html#createPayment) function, which takes a [`PaymentInfo`](https://www.wix.com/velo/reference/wix-pay-backend/introduction) object and creates a new payment object.  
**Lines 6-9**: Define the `PaymentInfo` (product payment information) directly in the code.

#### Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:

*   `0.50` (`amount`)
*   `DIY Robot` (`name`)
*   `0.50` (`price`)

### Step 3: Prepare the Pay API Page

On the Pay API page, we start by importing the module we need to work with payments in code. We also import the `createPaymentForProduct` function from the backend.

```javascript
import wixPayFrontend from 'wix-pay-frontend';
import {createPaymentForProduct} from 'backend/BE_PayAPI.web';
```

#### Understanding the Code

**Line 1**: Import the module we need to work with the [Wix Pay Frontend](https://www.wix.com/velo/reference/wix-pay) library.  
**Line 2**: Import the `createPaymentForProduct` function from the web method where it was created (see [Step 2](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-using-the-velo-pay-api-to-collect-payments-for-a-single-product.md)). This function creates a payment object based on payment information for a single product defined in the backend.

There are no identifiers you would need to change here to make this code work on your site.

### Step 4: Create the button1\_click function on the Pay API Page

The `button1_click` [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) runs when a visitor clicks the Buy Now button. The event handler calls backend code that returns a payment object based on product payment information.

The event handler then runs the wixPayFrontend [`startPayment`](https://www.wix.com/velo/reference/wix-pay.html#startPayment) function with the payment object returned from the backend. This opens a payment window and prompts the user to select a payment method and continue the payment process.

In our example, we included a `termsAndConditionsLink`, one of the [payment options](https://www.wix.com/velo/reference/wix-pay/startpayment) available for payments.

```javascript
export function button1_click(event) {
 createPaymentForProduct().then(payment => {
   wixPayFrontend.startPayment(payment.id, {"termsAndConditionsLink": "https://www.wix.com/"});
 });
}
```

#### Understanding the Code

**Line 1**: When the "Buy Now" button is clicked, run an event handler that does the following:  
**Line 2**: Run the `createPaymentForProduct` function, which was imported from the backend. With the payment object that is returned, do the following:  
**Line 3**: Run the wixPayFrontend [`startPayment`](https://www.wix.com/velo/reference/wix-pay.html#startPayment) function with the ID of the payment object. A payment window opens prompting the user for payment information.  
The `startPayment` function runs with an optional `termsAndConditionsLink` [`PaymentOption`](https://www.wix.com/velo/reference/wix-pay/startpayment). A checkbox with a link to a terms and conditions page is included in the payment window.

There are no identifiers you would need to change here to make this code work on your site.

In the payment window, the site visitor selects a payment method, fills in payment information, clicks **Pay Now**, and the transaction is completed. The visitor receives an email confirming the payment.

### Next Steps

*   Open [this example](http://editor.wix.com/html/editor/web/renderer/new?siteId=5eb2ea3b-6527-4b5e-899a-bbf130adfab0&metaSiteId=146f29a1-b47c-4a03-acac-eb05894259ec) in the Editor to work with the template.
*   Publish the site.
*   Learn more:
    *   [Velo: Using the Wix Pay API to Collect Payments for Products in a Database Collection](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-using-the-velo-pay-api-to-collect-payments-for-products-in-a-database-collection.md)
    *   [Velo Tutorial: Processing Payments](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-processing-payments.md)
    *   [wix-pay-frontend API](https://www.wix.com/velo/reference/wix-pay.html)
    *   [wix-pay-backend API](https://www.wix.com/velo/reference/wix-pay-backend.html)