Search.../

startPayment( )

Starts a payment.

Description

Before using the startPayment() function, you will 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 set your payment currency.

The startPayment() function returns a Promise that resolves to a PaymentResult object when the user completes the payment process. Only use this result for display purposes. For business decisions, such as updating collection data, use the onPaymentUpdate event.

Starting a payment prompts the user to select a payment method and continue the payment process with the options specified in the options parameter.

Before calling startPayment(), call createPayment() from your site's backend to create a payment and generate a value for the paymentId parameter.

To understand how startPayment() is used in a typical payment lifecycle, see Typical Payment Lifecycle.

Use the options parameter to:

  • Determine whether a user info page is shown at the beginning of the process.
  • Determine whether a thank you page is shown at the end of the process.
  • Determine whether a terms and conditions affirmation checkbox and link are shown.

Notes:

  • To work with the Pay API, you need to save and publish your site.

  • The backend createPayment() function takes a PaymentInfo parameter that defines the information for a payment. For security reasons you should always create the PaymentInfo object in backend code. Do not pass payment information from client-side code. Doing so opens a vulnerability that a malicious user can exploit to change payment information, such as the price of an item being purchased. To learn more about how to keep your payment code secure, see Security Considerations When Working with Wix Code.

Authorization

Request

This endpoint does not take any parameters

Response Object

Fulfilled - The created payment.

NAME
TYPE
DESCRIPTION
payment
Payment

The payment.

status
string

Payment status. One of:

  • "Successful": Payment was successfully received.
  • "Pending": Payment is pending payment provider approval.
  • "Failed": Payment has failed.
  • "Chargeback": Payment is chargeback.
  • "Refunded": Payment was fully refunded.
  • "Offline": Payment will be executed offline.
  • "PartiallyRefunded": Payment was partially refunded.
  • "Cancelled": Payment was cancelled and was not processed.
  • "Undefined": Payment status is pending payment provider input.
transactionId
string

ID of the payment transaction.

userInfo
PaymentUserInfo

An object representing information about the user.

Status/Error Codes

Was this helpful?

Start a payment on button click

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment() {
8 return wixPayBackend.createPayment({
9 items: [{
10 name: "Product Name",
11 price: 9.99
12 }],
13 amount: 9.99
14 });
15}
16
17/********************
18 * client-side code *
19 ********************/
20
21import {createMyPayment} from 'backend/pay';
22import wixPay from 'wix-pay';
23
24export function myButton_click(event, $w) {
25 createMyPayment()
26 .then( (payment) => {
27 wixPay.startPayment(payment.id);
28 } );
29}
Start a payment on button click using quantity

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment() {
8 return wixPayBackend.createPayment({
9 items: [{
10 name: "Product Name",
11 price: 9.99,
12 quantity: 2
13 }],
14 amount: 19.98
15 });
16}
17
18/********************
19 * client-side code *
20 ********************/
21
22import {createMyPayment} from 'backend/pay';
23import wixPay from 'wix-pay';
24
25export function myButton_click(event, $w) {
26 createMyPayment()
27 .then( (payment) => {
28 wixPay.startPayment(payment.id);
29 } );
30}
Start a payment on button click and handle status possibilities

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment() {
8 return wixPayBackend.createPayment( {
9 items: [ {
10 name: "Product Name",
11 price: 9.99
12 } ],
13 amount: 9.99
14 } );
15}
16
17/********************
18 * client-side code *
19 ********************/
20
21import {createMyPayment} from 'backend/pay';
22import wixPay from 'wix-pay';
23
24export function myButton_click(event, $w) {
25 createMyPayment()
26 .then( (payment) => {
27 wixPay.startPayment(payment.id)
28 .then( (result) => {
29 if (result.status === "Successful") {
30 // handle payment success
31 } else if (result.status === "Failed") {
32 // handle payment failure
33 } else if (result.status === "Pending") {
34 // handle payment pending
35 } else if (result.status === "Cancelled") {
36 // handle user closing payment panel
37 }
38 } );
39 } );
40}
Start a payment on button click with a custom thank you page

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment() {
8 return wixPayBackend.createPayment({
9 items: [ {
10 name: "Product Name",
11 price: 9.99
12 } ],
13 amount: 9.99
14 } );
15}
16
17/********************
18 * client-side code *
19 ********************/
20
21import {createMyPayment} from 'backend/pay';
22import wixPay from 'wix-pay';
23import wixWindow from 'wix-window';
24
25export function myButton_click(event, $w) {
26 createMyPayment()
27 .then( (payment) => {
28 wixPay.startPayment(payment.id, {"showThankYouPage": false})
29 .then( (result) => {
30 if (result.status === "Successful") {
31 wixWindow.openLightbox("Success Box");
32 } else if (result.status === "Pending") {
33 wixWindow.openLightbox("Pending Box");
34 }
35 } );
36 } );
37}
Start a payment on button click with a terms and conditions link

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment() {
8 return wixPayBackend.createPayment({
9 items: [{
10 name: "Product Name",
11 price: 9.99
12 }],
13 amount: 9.99
14 });
15}
16
17/********************
18 * client-side code *
19 ********************/
20
21import {createMyPayment} from 'backend/pay';
22import wixPay from 'wix-pay';
23
24export function myButton_click(event, $w) {
25 createMyPayment()
26 .then( (payment) => {
27 wixPay.startPayment(payment.id, {
28 "termsAndConditionsLink": "https://mysite.com/terms"
29 } );
30 } );
31}
Start a payment on button click using collection data

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixData from 'wix-data';
6import wixPayBackend from 'wix-pay-backend';
7
8export async function createMyPayment(productId) {
9 return wixData.get("productCollection", productId)
10 .then( (product) => {
11 return wixPayBackend.createPayment( {
12 items: [{
13 name: product.name,
14 price: product.price
15 }],
16 amount: product.price
17 } );
18 } );
19}
20
21/********************
22 * client-side code *
23 ********************/
24
25import {createMyPayment} from 'backend/pay';
26import wixPay from 'wix-pay';
27
28export function myButton_click(event, $w) {
29 createMyPayment(event.context.itemId)
30 .then( (payment) => {
31 wixPay.startPayment(payment.id);
32 } );
33}
Start a payment on button click using collection data and a quantity

Copy Code
1/**************************
2 * backend code - pay.jsw *
3 **************************/
4
5import wixData from 'wix-data';
6import wixPayBackend from 'wix-pay-backend';
7
8export async function createMyPayment(productId, quantity) {
9 return wixData.get("productCollection", productId)
10 .then( (product) => {
11 return wixPayBackend.createPayment( {
12 items: [{
13 name: product.name,
14 price: product.price,
15 quantity: quantity
16 }],
17 amount: product.price * quantity
18 } );
19 } );
20}
21
22/********************
23 * client-side code *
24 ********************/
25
26import {createMyPayment} from 'backend/pay';
27import wixPay from 'wix-pay';
28
29export function myButton_click(event, $w) {
30 let quantity = 2;
31
32 createMyPayment(event.context.itemId, quantity)
33 .then( (payment) => {
34 wixPay.startPayment(payment.id);
35 } );
36}