> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

# Method name: startPayment(paymentId: string, options: PaymentOptions)

# Method package: wixPayFrontend

# Method menu location: wixPayFrontend --> startPayment

# Method Link: https://dev.wix.com/docs/velo/apis/wix-pay-frontend/start-payment.md

# Method Description:

Starts a payment.

Before using the startPayment() function, you will need to set up your site to
 accept payments. To learn more, see [About Accepting Payments](https://support.wix.com/en/article/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](https://support.wix.com/en/article/setting-your-currency-for-accepting-payments).

 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`](wix-pay-backend/events/on-payment-update)
 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()`](wix-pay-backend/create-payment) from your site's backend.
 
 

 To understand how `startPayment()` is used in a typical payment lifecycle,
 see [Typical Payment Lifecycle](wix-pay-frontend/introduction#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()`](wix-pay-backend/create-payment) 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](https://support.wix.com/en/article/security-considerations-when-working-with-wix-code#code-visibility).
>
> + The `showThankYouPage` option only applies to your Wix site's [Thank You page](https://www.wix.com/velo/reference/$w/thankyoupage). In-app browsers have their own separate Thank You pages which are unaffected by this setting.



# Method Code Examples:

*** Note: do not assume any prop names or enum values other than the ones in the example.

## Start a payment on button click

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, () => {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99
  });
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPayFrontend.startPayment(payment.id);
    });
}
```

## Start a payment on button click using quantity

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, () => {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99,
      quantity: 2
    }],
    amount: 19.98
  });
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPayFrontend.startPayment(payment.id);
    });
}
```

## Start a payment on button click and handle status possibilities

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, () => {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99
  });
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPayFrontend.startPayment(payment.id)
        .then((result) => {
          if (result.status === "Successful") {
            // handle payment success
          } else if (result.status === "Failed") {
            // handle payment failure
          } else if (result.status === "Pending") {
            // handle payment pending
          } else if (result.status === "Cancelled") {
            // handle user closing payment panel
          }
        });
    });
}
```

## Start a payment on button click with a custom thank you page

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, () => {
  return wixPayBackend.createPayment({
    items: [ {
      name: "Product Name",
      price: 9.99
    } ],
    amount: 9.99
  } );
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';
import wixWindowFrontend from 'wix-window-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then( (payment) => {
      wixPayFrontend.startPayment(payment.id, {"showThankYouPage": false})
        .then( (result) => {
          if (result.status === "Successful") {
            wixWindowFrontend.openLightbox("Success Box");
          } else if (result.status === "Pending") {
            wixWindowFrontend.openLightbox("Pending Box");
          }
      } );
    } );
}
```

## Start a payment on button click with a terms and conditions link

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, () => {
  return wixPayBackend.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99
  });
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then((payment) => {
      wixPayFrontend.startPayment(payment.id, {
        "termsAndConditionsLink": "https://mysite.com/terms"
      });
    });
}
```

## Start a payment on button click using collection data

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixData from 'wix-data';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, async (productId) => {
  return wixData.get("productCollection", productId)
    .then( (product) => {
      return wixPayBackend.createPayment( {
        items: [{
          name: product.name,
          price: product.price
        }],
        amount: product.price
      } );
    } );
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment(event.context.itemId)
    .then( (payment) => {
      wixPayFrontend.startPayment(payment.id);
    } );
}
```

## Start a payment on button click using collection data and a quantity

```javascript
/**************************
 * backend code - pay.web.js *
 **************************/

import { Permissions, webMethod } from 'wix-web-module';
import wixData from 'wix-data';
import wixPayBackend from 'wix-pay-backend';

export const createMyPayment = webMethod(Permissions.Anyone, async (productId, quantity) => {
  return wixData.get("productCollection", productId)
    .then( (product) => {
      return wixPayBackend.createPayment( {
        items: [{
          name: product.name,
          price: product.price,
          quantity: quantity
        }],
        amount: product.price * quantity
      } );
    } );
});

/********************
 * client-side code *
 ********************/

import { createMyPayment } from 'backend/pay.web';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  let quantity = 2;

  createMyPayment(event.context.itemId, quantity)
    .then( (payment) => {
      wixPayFrontend.startPayment(payment.id);
    } );
}
```

---