> 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 Products in a Database Collection
## Article: Using the Velo Pay API to Collect Payments for Products in a Database Collection
## Article Link: 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
## Article Content:
# Velo Tutorial: Using the Velo Pay API to Collect Payments for Products in a Database Collection
>**Note:** This tutorial and its steps are based on a Wix Editor site. You can adapt the steps for a Wix Studio site by using the equivalent [Wix Studio features](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md).
This article describes how you can use the Velo Pay API to collect payments from your site's visitors for a product stored in a database collection, outside the context of a Wix App (like Wix Stores). Throughout this article we're going to use the same site to illustrate the process. You can open the site in the Editor to work with the [template](http://editor.wix.com/html/editor/web/renderer/new?siteId=712f4cc1-af6b-4223-a799-085d304242d4&metaSiteId=a9b9d72c-ee33-48e3-9b4a-1427aa561c50). We're going to explain how we set up the sample site and the code we added to make it work.
>**Note**
> To learn how to use the Velo Pay API for a single predefined product, see [Velo: Using the Velo Pay API to Collect Payments for a Single Product](https://support.wix.com/en/article/velo-tutorial-using-the-velo-pay-api-to-collect-payments-for-a-single-product).
### Overview
**In our site we added the following:**
* A Products collection with a list of products for sale. Each product needs a title, image, and price.
* A Collection & Repeater page. A repeater displays products from the Products collection. Each product in the repeater has a Buy Now button, 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 retrieves product payment information from the Products collection, and creates and returns a payment object to the client side.
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://support.wix.com/en/article/velo-tutorial-processing-payments#security-considerations) for working with payments in code. Specifically, make sure to:
* Always define payment information in the backend.
* Assign [collection permissions](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/collections/working-with-wix-app-collections-and-code.md) that protect payment information stored in your database. Make sure only site Admins can create, update, and delete content.
* 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 Site
For this example, you'll need some products for sale that are stored in a collection. We added Wix Stores to our site, which automatically adds a Stores/Products collection, but you can also create your own collection of products without Wix Stores.
>**Note**
> You may need to save or publish the site and refresh your browser to view Stores collections in Content Collections in the Databases section of the Code sidebar.
This is what some of the data in our Products collection looks like:
We also added a Collection & Repeater page to the site to display our products, and we created the BE\_Collection.web.js backend module to securely run code related to payment information.
### Step 2: Set up the Collection & Repeater Page
On the Collection & Repeater page we added:
* A repeater to display the products.
* Text and image elements in the repeater to display the name, price, and picture of each product for sale.
* A Buy Now button in the repeater to trigger the payment process for the selected product.
* A dataset connected to our Stores/Products collection for connecting data in the collection to the repeater.
>**Note**
> When you [display data from a collection in a repeater](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/displaying-data/display-database-collection-content-in-a-repeater.md), you must first connect the repeater to the dataset, and then connect each element in the repeater to the dataset.
* 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 repeater, we added an [onItemReady](https://www.wix.com/velo/reference/$w.Repeater.html#onItemReady) [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) that will run when the repeater is ready to be loaded.
* 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 Buy Now button, we added an [onClick](https://dev.wix.com/docs/velo/api-reference/$w/button/on-click.md) [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) that will run when the button is clicked.
### Step 3: Create the createPaymentForProduct Function in the Backend
We created a backend module called `BE_Collection.web.js`. In the backend, we start by importing the modules we need to work with backend payments and data in code.
Then we created the `createPaymentForProduct` function, which retrieves product data from the collection, and creates and returns a payment object based on the data. 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.
>**Note:**
> Throughout this example we use the [async/await](https://codeburst.io/javascript-es-2017-learn-async-await-by-example-48acc58bad65) JavaScript functionality.
```javascript
import { Permissions, webMethod } from 'wix-web-module';
import wixPay from 'wix-pay-backend';
import wixData from 'wix-data';
export const createPaymentForProduct = webMethod(Permissions.Anyone, async (productId) => {
let product = await wixData.get('Stores/Products', productId);
return wixPay.createPayment( {
amount: product.discountedPrice,
items: [
{ name: product.name, price: product.discountedPrice }
]
} );
});
```
#### Understanding the Code
**Line 1**: Import the `Permissions` enum and `webMethod` function from `wix-web-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 3**: Import the module we need to work with the [Wix Data](https://www.wix.com/velo/reference/wix-data.html) library.
**Line 5**: Declare the `createPaymentForProduct` function and export it so it can be used on the client side.
**Line 6**: Use the Wix Data [`get`](https://www.wix.com/velo/reference/wix-data.html#get) function to retrieve product information from the collection and assign it to the `product` variable. The `get` function uses the ID of the product selected by the visitor to "know" which product data to retrieve.
**Line 7**: Return the result of the [`wix-pay-backend`](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 8-10**: Define the `PaymentInfo` object using payment information stored in the `product` variable.
#### 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 this item to match the one on your site:
* `Stores/Products`
### Step 4: Prepare the Collection & Repeater Page
On the Collection & Repeater 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_Collection.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 backend module where it was created (see [Step 3](https://support.wix.com/en/article/velo-tutorial-using-the-velo-pay-api-to-collect-payments-for-products-in-a-database-collection#step-3-create-the-createpaymentforproduct-function-in-the-backend-1)). This function creates a payment object based on payment information for a product stored in the Products collection.
There are no identifiers you would need to change here to make this code work on your site.
### Step 5: Create the repeater1\_itemReady function on the Collection & Repeater page
The `repeater1_itemReady` [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) runs when the repeater is ready to be loaded.
The function runs for each item (product) in the collection. The current item is passed to the event handler as the `itemData` parameter.
First the function loads the item into the repeater, displaying product information. Then it checks if the user clicked the Buy Now button for this particular item.
If the button for this item was clicked, the `onClick()` [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) runs the backend `createPaymentForProduct` function that creates a payment object for the selected product.
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 also included a `termsAndConditionsLink`, one of the available [payment options](https://www.wix.com/velo/reference/wix-pay/startpayment).
```javascript
export function repeater1_itemReady($item, itemData, index) {
let itemId = itemData._id;
$item('#button1').onClick(async () => {
let payment = await createPaymentForProduct(itemId);
await wixPayFrontend.startPayment((payment.id), { "termsAndConditionsLink": "https://www.wix.com/" });
});
}
```
#### Understanding the Code
**Line 1**: For each item (product) in the Stores/Products dataset, set up the item in the repeater and then do the following:
**Line 2**: Store the ID of the item in the `itemID` variable.
**Line 3**: If the "Buy Now" button is clicked for this item, run an event handler that does the following:
**Line 4**: Run the `createPaymentForProduct` function, which was imported from the backend, with the ID of the selected product. Store the payment object that is returned in the `payment` variable.
**Line 5**: Run the Wix Pay Frontend [`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.
#### 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 this item to match the one on your site:
* `#button1`
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=712f4cc1-af6b-4223-a799-085d304242d4&metaSiteId=a9b9d72c-ee33-48e3-9b4a-1427aa561c50) in the Editor to work with the template.
* Publish the site.
* Learn more:
* [Velo: Using Wix Pay API to Collect Payments for a Single Product](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)
* [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)
