createPayment( )

Creates a new payment.

Description

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

The createPayment() function returns a Promise that resolves to a Payment object when the payment has been created.

Creating a payment is the first step in the process of accepting a payment from a user. After creating the payment, call startPayment() from your site's client-side code using the payment ID returned by createPayment. The startPayment() function prompts the user to select a payment method and continue the payment process.

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

Note:
To work with the Pay API, you need to save and publish your site.
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.

Syntax

function createPayment(paymentInfo: PaymentInfo): Promise<Payment>

createPayment Parameters

NAME

TYPE

DESCRIPTION

paymentInfo

PaymentInfo

The information for the payment being created.

Returns

Fulfilled - The created payment.

Return Type:

Promise<Payment>

NAME

TYPE

DESCRIPTION

string

Payment transaction ID.

amount

number

Payment total amount.

currency

string

Payment currency. A three-letter ISO-4217 currency code.

items

Array<PaymentItem>

Payment items.

userInfo

PaymentUserInfo

An object representing information about the user.

Was this helpful?

Create a new payment

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}

Create a new payment 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}

Create a new payment with user information

Copy Code

1/**************************
2 * Backend code - pay.jsw *
3 **************************/
4
5import wixPayBackend from 'wix-pay-backend';
6
7export function createMyPayment(userInfo) {
8  return wixPayBackend.createPayment({
9    items: [{
10      name: "Product Name",
11      price: 9.99,
12      quantity: 2
13    }],
14    amount: 19.98,
15    userInfo
16  });
17}
18
19/********************
20 * Client-side code *
21 ********************/
22
23import { createMyPayment } from 'backend/pay';
24import wixPay from 'wix-pay';
25
26export function myButton_click(event, $w) {
27  const firstName = // the user's first name
28  const lastName = // the user's last name
29  const phone = // the user's phone number
30  const email = // the user's email address
31  const countryCode = // the user's country code
32
33    createMyPayment({ firstName, lastName, phone, email, countryCode })
34      .then((payment) => {
35        wixPay.startPayment(payment.id);
36      });
37}

Create a new payment with custom currency

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    currency: "USD"
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}

Create a new payment 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}

Create a new payment 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) {
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}