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.

What We Built

On the Collection & Repeater page, we displayed multiple products for sale. Product and pricing information is retrieved from the Stores/Product database collection. Site visitors can pay for a product using a payment system based on the Wix Code Pay API.

How It Works

We displayed product and pricing information for each product in a repeater, and added a payment button for each product. When a visitor clicks a button, the BE_Collection.jsw backend module is called.

In the backend, the ID of the selected product is retrieved from the collection. Then 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.