Build a payment flow on Wix using the Wix Pay API. Set up a backend function that creates a payment object from transaction details, then wire a Purchase button on the front-end to call it and launch the checkout lightbox with WixPay.startPayment.
Chapters
Today I'll show you how to create a payment flow using the WIX Pay API so you can sell anything you want on your site. First, set up a payment method. Go to your site's dashboard and click Settings. Then click Accept Payments and Connect, a payment method. Keep in mind that you may be required to complete the setup with a third party provider. Once you're all set up, click Edit Site Here, Go to Backend and click on the plus sign. Select New web Module and give it a name with a JSW extension. In this example, I'll name the module BepayAPI JSW. Hit Enter and a full screen code panel will appear automatically. This is where you'll write your backend code, delete the example text in the code panel and import the WIX Pay backend module. It's important to write this function in the backend to help secure sensitive information like your product price. Now create and export the createpaymentforproduct function. This function contains the transaction details like the product price and the total amount of the purchase. To access this in your front end, return the WixPay CreatePayment function. Add the transaction details as two parameters. The first is Items. This is an array that contains an object with two name and price. To increase the quantity from the default value of 1, add a third property called quantity. Now add the second parameter, amount. This is the total cost of the purchase. It's important that amount is the same value as the total price. For example, if you've set the price as $0.50 and the quantity is 3, amount must be $1.50. Now let's go back to the editor and add a Purchase button. When a site visitor clicks on this button, the payment process will be initiated. From the Site Structure sidebar, select the page where you want your button. Go to Add button and choose one that matches the look and feel of your site. Add text that gets your customers to take action like Buy Now. Then open the code panel at the bottom of the page and import the WIX Pay module. Next, import the Create Payment for Product function from your site's backend. Now select your button from the Properties panel. Hover over on, click and click the plus sign. This event will automatically be added to your code here. Then call the Create Payment for Product function. This will generate a payment object with a unique ID using the transaction information you added in the Backend, call the WixPay StartPayment function and include the Payment object ID. This function will initiate the checkout process when a visitor clicks your purchase button. Now you've successfully connected the WixPay API. This will automatically create a checkout flow within a lightbox. When a customer clicks to make a purchase, they'll fill in their contact and payment information and then receive a thank you page. You can also include a mandatory checkbox with a link to your terms and conditions in your checkout flow. Just add another object containing terms and conditions and the URL, and now you're done with your code. Hit Publish here. Let's test it out and buy a robot. Go to the page with your Purchase button and click Buy Now. Add your contact and payment details, click Continue and agree to the Terms and conditions. Now you're ready to accept payments on your site. This video is always here, so come back and watch it again whenever you need help. You can also visit our Resources page for tutorials, articles, example code, and more.
