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). Throughout this article we're going to use to illustrate the process. You can open the site in the Editor to work with the . We're going to explain how we set up the sample site and the code we added to make it work. this site template Note 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 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: When a visitor clicks the "Buy Now" button, the button's event handler calls a backend function. 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. 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 Before you start working with Wix payments in code, make sure you do the following: Understand the 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. necessary security precautions Set up on your site. We also recommend that you understand the before proceeding. accepted payment methods typical payment process 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 of the button, we added an onClick . Properties & Events panel event handler Step 2: Create the createPaymentForProduct Function in the Backend We created a backend module called . Then we imported the module we need to work with payments in backend code. BE_PayAPI.jsw Then we declared the function, which creates and returns a payment object. We also export the function so it can be used on the client side. createPaymentForProduct Note that is the sum of the property for all . In this example, there is only one so amount and are identical. amount price items item price wixPay ; { wixPay.createPayment( { : , : [{ : , : }],
  } );
} import from 'wix-pay-backend' export ( ) function createPaymentForProduct return amount 0.50 items name 'DIY Robot' price 0.50 Understanding the Code : Import the module we need to work with the library. Line 1 Wix Pay Backend : Declare the function and export it  so it can be used on the client side. In the function, do the following: Line 3 createPaymentForProduct : Return the result of the function, which takes a object and creates a new payment object. Line 4 wix-backend-pay createPayment PaymentInfo : Define the PaymentInfo (product payment information) directly in the code. Lines 5-6 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. wixPay ; {createPaymentForProduct} ; import from 'wix-pay' import from 'backend/BE_PayAPI' Understanding the Code : Import the module we need to work with the library. Line 1 Wix Pay : Import the createPaymentForProduct function from the backend module where it was created (see ). This function creates a payment object based on payment information for a single product defined in the backend. Line 2 Step 2 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 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. button1_click event handler The event handler then runs the wixPay 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. startPayment In our example, we included a , one of the available for payments. termsAndConditionsLink payment options {
 createPaymentForProduct().then( {
   wixPay.startPayment(payment.id, { : });
 });
} export ( ) function button1_click event => payment "termsAndConditionsLink" "https://www.wix.com/" Understanding the Code : When the "Buy Now" button is clicked, run an event handler that does the following: Line 1 : Run the function, which was imported from the backend. With the payment object that is returned, do the following: Line 2 createPaymentForProduct : Run the wixPay function with the ID of the payment object. A payment window opens prompting the user for payment information. Line 3 startPayment The startPayment function runs with an optional . A checkbox with a link to a terms and conditions page is included in the payment window. termsAndConditionsLink PaymentOption 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 , and the transaction is completed. The visitor receives an email confirming the payment. Pay Now Next Steps 1. Open in the Editor to work with the template. this example 2. Publish the site. 3. Learn more: Velo: Using the Wix Pay API to Collect Payments for Products in a Database Collection Velo Tutorial: Processing Payments wix-pay API wix-pay-backend API Previously publilshed at https://support.wix.com/en/article/velo-tutorial-using-the-velo-pay-api-to-collect-payments-for-a-single-product

Dealing with Velo Web Modules: Our Advanced Tips for Improved Function Import

Velo API Introduction: The Basic Things You Should Know About the Velo

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

5 Step Guide on How to Set Up Velo Pay API for a Single-Product Online Payments

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps