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()
, create a payment and generate a value for the paymentId
parameter. You can do this by calling createPayment()
from your site's backend.
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 aPaymentInfo
parameter that defines the information for a payment. For security reasons you should always create thePaymentInfo
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.The
showThankYouPage
option only applies to your Wix site's Thank You page. In-app browsers have their own separate Thank You pages which are unaffected by this setting.
Syntax
function startPayment(paymentId: string, [options: PaymentOptions]): Promise<PaymentResult>
startPayment Parameters
NAME
TYPE
DESCRIPTION
The payment ID returned by createPayment()
or another app, such as Wix Pricing Plans' createOnlineOrder()
.
Payment process options.
Returns
Fulfilled - The created payment.
Return Type:
NAME
TYPE
DESCRIPTION
The payment.
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.
ID of the payment transaction.
An object representing information about the user.
Was this helpful?
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixPayBackend from 'wix-pay-backend';67export function createMyPayment() {8 return wixPayBackend.createPayment({9 items: [{10 name: "Product Name",11 price: 9.9912 }],13 amount: 9.9914 });15}1617/********************18 * client-side code *19 ********************/2021import {createMyPayment} from 'backend/pay';22import wixPayFrontend from 'wix-pay-frontend';2324export function myButton_click(event, $w) {25 createMyPayment()26 .then( (payment) => {27 wixPayFrontend.startPayment(payment.id);28 } );29}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixPayBackend from 'wix-pay-backend';67export function createMyPayment() {8 return wixPayBackend.createPayment({9 items: [{10 name: "Product Name",11 price: 9.99,12 quantity: 213 }],14 amount: 19.9815 });16}1718/********************19 * client-side code *20 ********************/2122import {createMyPayment} from 'backend/pay';23import wixPayFrontend from 'wix-pay-frontend';2425export function myButton_click(event, $w) {26 createMyPayment()27 .then( (payment) => {28 wixPayFrontend.startPayment(payment.id);29 } );30}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixPayBackend from 'wix-pay-backend';67export function createMyPayment() {8 return wixPayBackend.createPayment( {9 items: [ {10 name: "Product Name",11 price: 9.9912 } ],13 amount: 9.9914 } );15}1617/********************18 * client-side code *19 ********************/2021import {createMyPayment} from 'backend/pay';22import wixPayFrontend from 'wix-pay-frontend';2324export function myButton_click(event, $w) {25 createMyPayment()26 .then( (payment) => {27 wixPayFrontend.startPayment(payment.id)28 .then( (result) => {29 if (result.status === "Successful") {30 // handle payment success31 } else if (result.status === "Failed") {32 // handle payment failure33 } else if (result.status === "Pending") {34 // handle payment pending35 } else if (result.status === "Cancelled") {36 // handle user closing payment panel37 }38 } );39 } );40}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixPayBackend from 'wix-pay-backend';67export function createMyPayment() {8 return wixPayBackend.createPayment({9 items: [ {10 name: "Product Name",11 price: 9.9912 } ],13 amount: 9.9914 } );15}1617/********************18 * client-side code *19 ********************/2021import {createMyPayment} from 'backend/pay';22import wixPayFrontend from 'wix-pay-frontend';23import wixWindowFrontend from 'wix-window-frontend';2425export function myButton_click(event, $w) {26 createMyPayment()27 .then( (payment) => {28 wixPayFrontend.startPayment(payment.id, {"showThankYouPage": false})29 .then( (result) => {30 if (result.status === "Successful") {31 wixWindowFrontend.openLightbox("Success Box");32 } else if (result.status === "Pending") {33 wixWindowFrontend.openLightbox("Pending Box");34 }35 } );36 } );37}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixPayBackend from 'wix-pay-backend';67export function createMyPayment() {8 return wixPayBackend.createPayment({9 items: [{10 name: "Product Name",11 price: 9.9912 }],13 amount: 9.9914 });15}1617/********************18 * client-side code *19 ********************/2021import {createMyPayment} from 'backend/pay';22import wixPayFrontend from 'wix-pay-frontend';2324export function myButton_click(event, $w) {25 createMyPayment()26 .then( (payment) => {27 wixPayFrontend.startPayment(payment.id, {28 "termsAndConditionsLink": "https://mysite.com/terms"29 } );30 } );31}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixData from 'wix-data';6import wixPayBackend from 'wix-pay-backend';78export 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.price15 }],16 amount: product.price17 } );18 } );19}2021/********************22 * client-side code *23 ********************/2425import {createMyPayment} from 'backend/pay';26import wixPayFrontend from 'wix-pay-frontend';2728export function myButton_click(event, $w) {29 createMyPayment(event.context.itemId)30 .then( (payment) => {31 wixPayFrontend.startPayment(payment.id);32 } );33}
1/**************************2 * backend code - pay.jsw *3 **************************/45import wixData from 'wix-data';6import wixPayBackend from 'wix-pay-backend';78export 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: quantity16 }],17 amount: product.price * quantity18 } );19 } );20}2122/********************23 * client-side code *24 ********************/2526import {createMyPayment} from 'backend/pay';27import wixPayFrontend from 'wix-pay-frontend';2829export function myButton_click(event, $w) {30 let quantity = 2;3132 createMyPayment(event.context.itemId, quantity)33 .then( (payment) => {34 wixPayFrontend.startPayment(payment.id);35 } );36}