Search.../

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
id

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

Code Example

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: 19.98
14 } );
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 quantity

Code Example

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/********************
20 * client-side code *
21 ********************/
22
23import {createMyPayment} from 'backend/pay';
24import wixPay from 'wix-pay';
25
26export function myButton_click(event, $w) {
27 createMyPayment()
28 .then( (payment) => {
29 wixPay.startPayment(payment.id);
30 } );
31}
Create a new payment with user information

Code Example

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/********************
21 * client-side code *
22 ********************/
23
24import {createMyPayment} from 'backend/pay';
25import wixPay from 'wix-pay';
26
27export function myButton_click(event, $w) {
28 const firstName = // the user's first name
29 const lastName = // the user's last name
30 const phone = // the user's phone number
31 const email = // the user's email address
32 const countryCode = // the user's country code
33
34 createMyPayment( { firstName, lastName, phone, email, countryCode } )
35 .then( (payment) => {
36 wixPay.startPayment(payment.id);
37 } );
38}
Create a new payment with custom currency

Code Example

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/********************
20 * client-side code *
21 ********************/
22
23import {createMyPayment} from 'backend/pay';
24import wixPay from 'wix-pay';
25
26export function myButton_click(event, $w) {
27 createMyPayment()
28 .then( (payment) => {
29 wixPay.startPayment(payment.id);
30 } );
31}
Create a new payment using collection data

Code Example

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/********************
23 * client-side code *
24 ********************/
25
26import {createMyPayment} from 'backend/pay';
27import wixPay from 'wix-pay';
28
29export function myButton_click(event, $w) {
30 createMyPayment(event.context.itemId)
31 .then( (payment) => {
32 wixPay.startPayment(payment.id);
33 } );
34}
Create a new payment using collection data and a quantity

Code Example

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/********************
23 * client-side code *
24 ********************/
25
26import {createMyPayment} from 'backend/pay';
27import wixPay from 'wix-pay';
28
29export function myButton_click(event, $w) {
30 createMyPayment(event.context.itemId)
31 .then( (payment) => {
32 wixPay.startPayment(payment.id);
33 } );
34}