Using the Velo Pay API you can collect payments from your site's visitors outside the context of a Wix App like Wix Stores. The API allows you to collect a payment when triggered by any user interaction on any page. Warning: Before starting with payments, it is important that you fully understand how to handle the security concerns detailed below that arise when collecting payments. Prerequisites Before using the Pay API, you need to set up your site to accept payments. To learn more, see . About Accepting Payments When setting up your site to accept payments, be sure to select the payment methods you want to offer and . Note: set your payment currency Additionally, you will need to be familiar with creating backend web modules and calling the functions defined in them from page code. To learn more, see Calling Server-Side Code from the Front-End with Web Modules. You also might want to familiarize yourself with who can see and call your site's code. To learn more, see the section of . Code Visibility Security Considerations When Working with Velo Pay API To work with the Pay API, you need to save and publish your site. Note: The Pay API is split between backend and client-side functions to facilitate a secure payment process as described . It consists of two functions and one event: below - Called in backend code to create a payment and generate a . createPayment() paymentId - Called in client-side code to prompt the current site visitor to enter the payment information. startPayment() - Fired in backend code when a payment's status has changed. onPaymentUpdate() For detailed information on the Pay API see and in the API Reference. wix-pay wix-pay-backend Payment Lifecycle The following list outlines the steps taken in a typical payment lifecycle: A site visitor clicks a button to start the payment process. The button's event handler calls a backend function. A object containing information about the payment, such as the payment amount, is created in the backend function. PaymentInfo The backend function calls using the object and returns the generated object to the calling client-side event handler. createPayment() PaymentInfo Payment The event handler then calls the function with the from the object, which opens the payment popup on your site. startPayment() id Payment The site visitor enters the payment information. The event handler optionally handles the returned . PaymentResult Handle additional status updates to the payment transaction using the event. onPaymentUpdate() Payment Code Example The following is an example showing the payment lifecycle in code. The numbered comments correspond to the numbered steps in the payment lifecycle described above. {createMyPayment} ; wixPay ; wixWindow ; { createMyPayment() .then( { wixPay.startPayment(payment.id, { : , : }) .then( { (result.status === ) {
            wixWindow.openLightbox( );
          } (result.status === ) {
            wixWindow.openLightbox( );
          }
      } );
    } );
} /********************
 * client-side code *
 ********************/ import from 'backend/pay' import from 'wix-pay' import from 'wix-window' // Step 1 - User clicks a button. export ( ) function myButton_click event // Step 2 - Call backend function. // (Next, see step 3 in the backend code below.) // When the payment has been created and a paymentId has been returned: ( ) => payment // Step 5 - Call the startPayment() function with the paymentId. // Include PaymentOptions to customize the payment experience. "showThankYouPage" false "termsAndConditionsLink" "https://mysite.com/terms" // Step 6 - Visitor enters the payment information. // When the payment form is completed: ( ) => result // Step 7 - Handle the payment result. // (Next, see step 8 in the backend code below.) if "Successful" "Success Box" else if "Pending" "Pending Box" wixPay ; { paymentInfo = { : [ 
      { : , : },
      { : , : }
    ], : } wixPay.createPayment(paymentInfo);
} /**************************
 * backend code - pay.jsw *
 **************************/ import from 'wix-pay-backend' export ( ) function createMyPayment // Step 3 - Create payment info object. // Here we use static data. You might want to use data from a // collection. To see an example of such a usage, see the API Reference. let "items" name "Product 1" price 9.99 name "Product 2" price 19.99 amount 29.98 // Step 4 - Call createPayment() with the payment information // and return the paymentId. // (Next, see step 5 in the client-side code above.) return { paymentId = event.payment.id; newTransactionStatus = event.status; userInfo = event.userInfo; } /*****************************
 * backend code - events.js  *
 *****************************/ export ( ) function wixPay_onPaymentUpdate event // Step 8 - Handle additional status updates using // the onPaymentUpdate() event. let let let // Handle new payment status. Security Considerations For security reasons you should always create the object (step 3 above) in backend code. PaymentInfo Do not pass payment information from client-side code. Passing payment information from client-side code opens a vulnerability which is easily exploited. Since malicious site visitors can call your exported backend functions from the browser, they would be able to alter the payment information that is passed to the backend code. For example, if you pass the price of an item being purchased from client-side code, a user can change the price of the item. To securely process a payment, always define the payment information in the backend. Even though malicious users can call the backend function, they cannot see or change what happens in that function. If needed, you can also include additional validations in your backend function. If you want to perform operations based on a payment's status, always use the status updates received by the backend payment events. Status information that is received in client-side code should only be used for display purposes. Previously published at https://support.wix.com/en/article/velo-tutorial-processing-payments

Flow

Velo by Wix: Anatomy of URLs On Paid And Free Platforms

5 Hot Velo Practices to Test and Debug Your Website Code

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Creating a Payment Flow using Velo Pay API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps