Velo Tutorial: Using the Velo Pay API to Collect Payments for Products in a Database Collection
Overview
- 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.
- When a visitor clicks the Buy Now button, the button's event handler calls a backend function.
- The backend function retrieves product payment information from the Products collection, and creates and returns a payment object to the client side.
- On the client side, a payment procedure is initiated using the ID from the payment object, causing a payment window to appear.
- The visitor enters payment information and completes the transaction.
Before You Start
- Understand the necessary security precautions for working with payments in code. Specifically, make sure to:
- Always define payment information in the backend.
- Assign collection permissions that protect payment information stored in your database. Make sure only site Admins can can create, update, and delete content.
- Set up accepted payment methods on your site. We also recommend that you understand the typical payment process before proceeding.
Step 1: Set up the Site
Step 2: Set up the Collection & Repeater Page
- 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.
- In the Properties & Events panel of the repeater, we added an onItemReady event handler that will run when the repeater is ready to be loaded.
- In the Properties & Events panel of the Buy Now button, we added an onClick event handler 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.jsw. 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.
1import wixPay from 'wix-pay-backend';
2import wixData from 'wix-data';
3
4export async function createPaymentForProduct(productId) {
5 let product = await wixData.get('Stores/Products', productId);
6 return wixPay.createPayment( {
7 amount: product.discountedPrice,
8 items: [
9 { name: product.name, price: product.discountedPrice }
10 ]
11 } );
12}Understanding the Code
Line 1: Import the module we need to work with the Wix Pay Backend library.
Line 2: Import the module we need to work with the Wix Data library.
Line 4: Declare the createPaymentForProduct function and export it so it can be used on the client side. In the function, do the following:
Line 5: Use the Wix Data 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 6: Return the result of the wix-backend-pay createPayment function, which takes a PaymentInfo object and creates a new payment object.
Lines 7-9: Define the PaymentInfo object using payment information stored in the product variable.
Identifiers you may need to change based on your site's elements
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.
1import wixPay from 'wix-pay';
2import {createPaymentForProduct} from 'backend/BE_Collection';Understanding the Code
Line 1: Import the module we need to work with the Wix Pay library.
Line 2: Import the createPaymentForProduct function from the backend module where it was created (see Step 3). This function creates a payment object based on payment information for a product stored in the Products collection.
Step 5: Create the repeater1_itemReady function on the Collection & Repeater page
The repeater1_itemReady event handler 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 runs the backend createPaymentForProduct function that creates a payment object for the selected product.
The event handler then runs the wixPay 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.
1export function repeater1_itemReady($item, itemData, index) {
2 let itemId = itemData._id;
3 $item('#button1').onClick(async () => {
4 let payment = await createPaymentForProduct(itemId);
5 await wixPay.startPayment((payment.id), { "termsAndConditionsLink": "https://www.wix.com/" });
6 });
7}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 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. 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
#button1
Next Steps
- Open this example in the Editor to work with the template.
- Publish the site.
- Learn more: