top of page
Collect Payments for a Single Product

Collect Payments for a Single Product

Collect quick and secure payments from your site visitors.

Intermediate.png

Intermediate

2K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we created a custom payment experience for a site visitor, using the Velo Pay API.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Before you start working with the Wix Pay API, make sure you do the following:

  • Apply all necessary security precautions for working with payments in code. Specifically, make sure to always define payment information in the backend.

  • Set up accepted payment methods on your site. We also recommend that you understand the typical payment process before proceeding.


How It Works


We displayed a product for sale and added a payment button. When a visitor clicks the button, the BE_PayAPI.jsw backend module is called, and the Wix Pay createPayment() function creates a payment info object with a unique payment ID.

 

The Wix Pay startPayment() function runs in the client-side with the payment ID, opening a payment popup. The visitor enters payment information and completes the transaction.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Velo.

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Collect Payments for Products in a Database Collection

Collect Payments for Products in a Database Collection

Collect quick and secure payments for products in your database collection.

Intermediate.png

Intermediate

Currency Converter

Currency Converter

Convert a specified amount of money from one currency to another

Intermediate.png

Intermediate

Anchor 2
bottom of page