# Reference (/sdk/js/v5/reference)



> **Important:** **Important:** This documentation covers the JavaScript SDK v5 with the
> `CardFields` component. For the legacy `HostedFields` component, see the
> [archived reference](/sdk/js/v1/reference/).

## Overview [#overview]

The PayPal JavaScript SDK dynamically exposes objects and methods based on the components you select. Add components to your `<script>` by passing them in the `src` URL using the `components` query string parameter.

```javascript lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=YOUR_COMPONENTS"></script>
```

The JavaScript SDK supports the following components:

* [`buttons`](#buttons) (default)
* [`marks`](#marks)
* [`card-fields`](#card-fields)
* [`funding-eligibility`](#funding-eligibility)
* [`messages`](#messages)

## Buttons [#buttons]

The payment buttons component automatically shows all eligible buttons in a single location on your page. See the [standard payments](/v5/checkout/one-time) integration.

#### Vanilla JS

```html lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons"></script>
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
    // Add other options as needed
  };
  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
        // Add other options as needed
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal.Buttons().render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### paypal.Buttons(options) [#paypalbuttonsoptions]

* [style](#style)
* [message](#message)
* [createOrder](#createorder)
* [createSubscription](#create-subscription)
* [onApprove](#onapprove)
* [onCancel](#oncancel)
* [onError](#onerror)
* [onInit/onClick](#oninitonclick)
* [onShippingChange](#onshippingchange)
* [onShippingAddressChange](#on-shipping-address-change)
* [onShippingOptionsChange](#on-shipping-options-change)

### style [#style]

Customize your buttons using the `style` option.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    style: {
      layout: "vertical",
      color: "blue",
      shape: "rect",
      label: "paypal",
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const styles = {
    shape: "rect",
    layout: "vertical",
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons style={styles} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const styles: PayPalButtonsComponentProps["style"] = {
        shape: "rect",
        layout: "vertical",
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons style={styles}/>
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        style: {
          layout: "vertical",
          color: "blue",
          shape: "rect",
          label: "paypal",
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### Layout [#layout]

Set the `style.layout` option to determine how the buttons show up when multiple buttons are available:

| Value        | Description                                                                                                                                                                                                                        | Layout                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `vertical`   | **Default**. Buttons are stacked vertically with a maximum of 6 buttons. Recommended when: Presenting a dynamic list of payment options on checkout and shopping cart pages.Leveraging Checkout as a full-stack payments platform. | ![](https://www.paypalobjects.com/ppdevdocs/v1/img/icon-mobile.svg) **Mobile**<br />![](https://www.paypalobjects.com/ppdevdocs/v1/img/docs/pay-later/vertical_mobile.png)<br />Venmo is available on mobile in US markets only.<hr />![](https://www.paypalobjects.com/ppdevdocs/v1/img/icon-web.svg)**Web**<br />![](https://www.paypalobjects.com/ppdevdocs/v1/img/docs/checkout/vertical_web.png) |
| `horizontal` | Buttons are stacked horizontally with a maximum of 2 buttons. Recommended when: Placing buttons on a product page, next to the product.Space on the page is limited.Alternative payment options are already provided.              | ![](https://www.paypalobjects.com/ppdevdocs/v1/img/icon-mobile.svg) **Mobile**<br /><br />Venmo is available on mobile in US markets only.<hr />![](https://www.paypalobjects.com/ppdevdocs/v1/img/icon-web.svg)**Web**<br />![](https://www.paypalobjects.com/ppdevdocs/v1/img/docs/pay-later/horizontal_web.png)                                                                                    |

### Which buttons will I see? [#which-buttons-will-i-see]

The buttons that show up are decided automatically, based on a range of factors, including:

* Buyer country
* Device type
* Funding sources the buyer has opted to see

As a result, each buyer sees a unique combination of buttons. Pay Later offers differ by country and have different buttons. To prevent certain buttons from showing up, see [Disable funding](/sdk/js/configuration/#disable-funding) in the JavaScript SDK reference.

### Color [#color]

Set the `style.color` option to 1 of these values:

| Value                    | Description                                                                                                                                                                                                                                                                | Button                                                                                                             |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `gold`                   | **Recommended**<br />People around the world know us for the color gold and research confirms it. Extensive testing determined just the right shade and shape that help increase conversion. Use it on your website to leverage PayPal’s recognition and preference.       | <PayPalButtonPreview color="gold" />                                                                               |
| `blue`                   | **First alternative**<br />If gold doesn't work for your site, try the PayPal `blue` button. Research shows that people know it is our brand color, which provides a halo of trust and security to your experience.                                                        | <PayPalButtonPreview color="blue" />                                                                               |
| `silver` `white` `black` | **Second alternatives**<br />If gold or blue doesn't work for your site design or aesthetic, try the `silver`, `white`, or `black` buttons. Because these colors are less capable of drawing people’s attention, we recommend these button colors as a second alternative. | <PayPalButtonPreview color="silver" /> <PayPalButtonPreview color="white" /> <PayPalButtonPreview color="black" /> |

### Shape [#shape]

Set the `style.shape` option to 1 of these values:

| Value   | Description                                    | Button                               |
| ------- | ---------------------------------------------- | ------------------------------------ |
| `rect`  | **Recommended**<br />The default button shape. | <PayPalButtonPreview shape="rect" /> |
| `pill`  | Rounds the sides of the button.                | <PayPalButtonPreview shape="pill" /> |
| `sharp` | Gives the button sharp corners.                |                                      |

#### Border radius [#border-radius]

`style.borderRadius` is used to define a custom border radius of the buttons.

To define the border radius of the buttons, set the `style.borderRadius` option to a number that is greater than or equal to `0`.

> **Note:** If `style.borderRadius` and `style.shape` are both defined,
> `style.borderRadius` will take priority.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    style: {
      borderRadius: 10,
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const styles = {
    borderRadius: 10,
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons style={styles} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const styles : PayPalButtonsComponentProps["style"] = {
        borderRadius: 10,
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons style={styles}/>
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        style: {
          borderRadius: 10,
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

#### Size [#size]

* The button adapts to the size of its container element by default.
* Your button container element needs to be wide enough for your horizontal payment buttons.

#### Height [#height]

To customize the button height, set the `style.height` option to a value from `25` to `55`.
The button has a default maximum height of 55px. Remove this limitation and set the button height to fill its parent container:

1. Set `style.disableMaxHeight` to `true`.
2. Select a valid funding source: `fundingSource: 'paypal' | 'venmo' | 'paylater' | 'credit'`
3. Change the `height` value at the parent container level.

> **Note:** If `style.disableMaxHeight` and `style.height` are both defined on the PayPal
> button, an error will be thrown and the button will not render. You must
> choose one or the other.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    style: {
      disableMaxHeight: true,
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const styles = {
    disableMaxHeight: true,
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons style={styles} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const styles : PayPalButtonsComponentProps["style"] = {
        disableMaxHeight: true,
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons style={styles}/>
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        style: {
          disableMaxHeight: true,
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

#### Width [#width]

The button has a default maximum width of 750px, but you can make the button larger:

1. Set `style.disableMaxWidth` to `true`.
2. Change the `max-width` value at the container level.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    style: {
      disableMaxWidth: true,
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const styles = {
    disableMaxWidth: true,
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons style={styles} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const styles : PayPalButtonsComponentProps["style"] = {
        disableMaxWidth: true,
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons style={styles}/>
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        style: {
          disableMaxWidth: true,
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

#### Label [#label]

Set the `style.label` option to 1 of these values:

Value

Description

Button

`paypal`

**Recommended**

<br />

The default option. Shows the PayPal logo.

<PayPalButtonPreview color="gold" label="paypal" />

`checkout`

Shows the Checkout button.

<PayPalButtonPreview color="gold" label="checkout" />

`buynow`

Shows the PayPal Buy Now button and initializes the checkout flow.

<PayPalButtonPreview label="buynow" branding="true" />

`pay`

Shows the Pay With PayPal button and initializes the checkout flow.

<PayPalButtonPreview label="pay" />

`installment`

Shows the PayPal installment button and offers a specified number of payments during a payment installment period.

> **Note:** The 
>
> `installment`
>
>  feature is available only in 
>
> `MX`
>
>  and 
>
> `BR`
>
> .

Set `style.period` to set the number of payments during the installment period:

* `BR`: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
* `en_MX`, `MX`: 3, 6, 9, 12

<PayPalButtonPreview label="installment" locale="en_MX" installmentPeriod="3" />

#### Tagline [#tagline]

Set the `style.tagline` to `false` to disable the tagline text:

> **Note:** Set the `style.layout` to `horizontal` for taglines. If using the `message`
> option it will replace the tagline.

| Value   | Description                                          | Button                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `true`  | **Recommended**<br />Show tagline text<br />Default. | <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxcHgiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAxMDEgMzIiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHhtbG5zPSJodHRwOiYjeDJGOyYjeDJGO3d3dy53My5vcmcmI3gyRjsyMDAwJiN4MkY7c3ZnIj48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDEyLjIzNyAyLjggTCA0LjQzNyAyLjggQyAzLjkzNyAyLjggMy40MzcgMy4yIDMuMzM3IDMuNyBMIDAuMjM3IDIzLjcgQyAwLjEzNyAyNC4xIDAuNDM3IDI0LjQgMC44MzcgMjQuNCBMIDQuNTM3IDI0LjQgQyA1LjAzNyAyNC40IDUuNTM3IDI0IDUuNjM3IDIzLjUgTCA2LjQzNyAxOC4xIEMgNi41MzcgMTcuNiA2LjkzNyAxNy4yIDcuNTM3IDE3LjIgTCAxMC4wMzcgMTcuMiBDIDE1LjEzNyAxNy4yIDE4LjEzNyAxNC43IDE4LjkzNyA5LjggQyAxOS4yMzcgNy43IDE4LjkzNyA2IDE3LjkzNyA0LjggQyAxNi44MzcgMy41IDE0LjgzNyAyLjggMTIuMjM3IDIuOCBaIE0gMTMuMTM3IDEwLjEgQyAxMi43MzcgMTIuOSAxMC41MzcgMTIuOSA4LjUzNyAxMi45IEwgNy4zMzcgMTIuOSBMIDguMTM3IDcuNyBDIDguMTM3IDcuNCA4LjQzNyA3LjIgOC43MzcgNy4yIEwgOS4yMzcgNy4yIEMgMTAuNjM3IDcuMiAxMS45MzcgNy4yIDEyLjYzNyA4IEMgMTMuMTM3IDguNCAxMy4zMzcgOS4xIDEzLjEzNyAxMC4xIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDM1LjQzNyAxMCBMIDMxLjczNyAxMCBDIDMxLjQzNyAxMCAzMS4xMzcgMTAuMiAzMS4xMzcgMTAuNSBMIDMwLjkzNyAxMS41IEwgMzAuNjM3IDExLjEgQyAyOS44MzcgOS45IDI4LjAzNyA5LjUgMjYuMjM3IDkuNSBDIDIyLjEzNyA5LjUgMTguNjM3IDEyLjYgMTcuOTM3IDE3IEMgMTcuNTM3IDE5LjIgMTguMDM3IDIxLjMgMTkuMzM3IDIyLjcgQyAyMC40MzcgMjQgMjIuMTM3IDI0LjYgMjQuMDM3IDI0LjYgQyAyNy4zMzcgMjQuNiAyOS4yMzcgMjIuNSAyOS4yMzcgMjIuNSBMIDI5LjAzNyAyMy41IEMgMjguOTM3IDIzLjkgMjkuMjM3IDI0LjMgMjkuNjM3IDI0LjMgTCAzMy4wMzcgMjQuMyBDIDMzLjUzNyAyNC4zIDM0LjAzNyAyMy45IDM0LjEzNyAyMy40IEwgMzYuMTM3IDEwLjYgQyAzNi4yMzcgMTAuNCAzNS44MzcgMTAgMzUuNDM3IDEwIFogTSAzMC4zMzcgMTcuMiBDIDI5LjkzNyAxOS4zIDI4LjMzNyAyMC44IDI2LjEzNyAyMC44IEMgMjUuMDM3IDIwLjggMjQuMjM3IDIwLjUgMjMuNjM3IDE5LjggQyAyMy4wMzcgMTkuMSAyMi44MzcgMTguMiAyMy4wMzcgMTcuMiBDIDIzLjMzNyAxNS4xIDI1LjEzNyAxMy42IDI3LjIzNyAxMy42IEMgMjguMzM3IDEzLjYgMjkuMTM3IDE0IDI5LjczNyAxNC42IEMgMzAuMjM3IDE1LjMgMzAuNDM3IDE2LjIgMzAuMzM3IDE3LjIgWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDMwODciIGQ9Ik0gNTUuMzM3IDEwIEwgNTEuNjM3IDEwIEMgNTEuMjM3IDEwIDUwLjkzNyAxMC4yIDUwLjczNyAxMC41IEwgNDUuNTM3IDE4LjEgTCA0My4zMzcgMTAuOCBDIDQzLjIzNyAxMC4zIDQyLjczNyAxMCA0Mi4zMzcgMTAgTCAzOC42MzcgMTAgQyAzOC4yMzcgMTAgMzcuODM3IDEwLjQgMzguMDM3IDEwLjkgTCA0Mi4xMzcgMjMgTCAzOC4yMzcgMjguNCBDIDM3LjkzNyAyOC44IDM4LjIzNyAyOS40IDM4LjczNyAyOS40IEwgNDIuNDM3IDI5LjQgQyA0Mi44MzcgMjkuNCA0My4xMzcgMjkuMiA0My4zMzcgMjguOSBMIDU1LjgzNyAxMC45IEMgNTYuMTM3IDEwLjYgNTUuODM3IDEwIDU1LjMzNyAxMCBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA2Ny43MzcgMi44IEwgNTkuOTM3IDIuOCBDIDU5LjQzNyAyLjggNTguOTM3IDMuMiA1OC44MzcgMy43IEwgNTUuNzM3IDIzLjYgQyA1NS42MzcgMjQgNTUuOTM3IDI0LjMgNTYuMzM3IDI0LjMgTCA2MC4zMzcgMjQuMyBDIDYwLjczNyAyNC4zIDYxLjAzNyAyNCA2MS4wMzcgMjMuNyBMIDYxLjkzNyAxOCBDIDYyLjAzNyAxNy41IDYyLjQzNyAxNy4xIDYzLjAzNyAxNy4xIEwgNjUuNTM3IDE3LjEgQyA3MC42MzcgMTcuMSA3My42MzcgMTQuNiA3NC40MzcgOS43IEMgNzQuNzM3IDcuNiA3NC40MzcgNS45IDczLjQzNyA0LjcgQyA3Mi4yMzcgMy41IDcwLjMzNyAyLjggNjcuNzM3IDIuOCBaIE0gNjguNjM3IDEwLjEgQyA2OC4yMzcgMTIuOSA2Ni4wMzcgMTIuOSA2NC4wMzcgMTIuOSBMIDYyLjgzNyAxMi45IEwgNjMuNjM3IDcuNyBDIDYzLjYzNyA3LjQgNjMuOTM3IDcuMiA2NC4yMzcgNy4yIEwgNjQuNzM3IDcuMiBDIDY2LjEzNyA3LjIgNjcuNDM3IDcuMiA2OC4xMzcgOCBDIDY4LjYzNyA4LjQgNjguNzM3IDkuMSA2OC42MzcgMTAuMSBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5MC45MzcgMTAgTCA4Ny4yMzcgMTAgQyA4Ni45MzcgMTAgODYuNjM3IDEwLjIgODYuNjM3IDEwLjUgTCA4Ni40MzcgMTEuNSBMIDg2LjEzNyAxMS4xIEMgODUuMzM3IDkuOSA4My41MzcgOS41IDgxLjczNyA5LjUgQyA3Ny42MzcgOS41IDc0LjEzNyAxMi42IDczLjQzNyAxNyBDIDczLjAzNyAxOS4yIDczLjUzNyAyMS4zIDc0LjgzNyAyMi43IEMgNzUuOTM3IDI0IDc3LjYzNyAyNC42IDc5LjUzNyAyNC42IEMgODIuODM3IDI0LjYgODQuNzM3IDIyLjUgODQuNzM3IDIyLjUgTCA4NC41MzcgMjMuNSBDIDg0LjQzNyAyMy45IDg0LjczNyAyNC4zIDg1LjEzNyAyNC4zIEwgODguNTM3IDI0LjMgQyA4OS4wMzcgMjQuMyA4OS41MzcgMjMuOSA4OS42MzcgMjMuNCBMIDkxLjYzNyAxMC42IEMgOTEuNjM3IDEwLjQgOTEuMzM3IDEwIDkwLjkzNyAxMCBaIE0gODUuNzM3IDE3LjIgQyA4NS4zMzcgMTkuMyA4My43MzcgMjAuOCA4MS41MzcgMjAuOCBDIDgwLjQzNyAyMC44IDc5LjYzNyAyMC41IDc5LjAzNyAxOS44IEMgNzguNDM3IDE5LjEgNzguMjM3IDE4LjIgNzguNDM3IDE3LjIgQyA3OC43MzcgMTUuMSA4MC41MzcgMTMuNiA4Mi42MzcgMTMuNiBDIDgzLjczNyAxMy42IDg0LjUzNyAxNCA4NS4xMzcgMTQuNiBDIDg1LjczNyAxNS4zIDg1LjkzNyAxNi4yIDg1LjczNyAxNy4yIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDA5Y2RlIiBkPSJNIDk1LjMzNyAzLjMgTCA5Mi4xMzcgMjMuNiBDIDkyLjAzNyAyNCA5Mi4zMzcgMjQuMyA5Mi43MzcgMjQuMyBMIDk1LjkzNyAyNC4zIEMgOTYuNDM3IDI0LjMgOTYuOTM3IDIzLjkgOTcuMDM3IDIzLjQgTCAxMDAuMjM3IDMuNSBDIDEwMC4zMzcgMy4xIDEwMC4wMzcgMi44IDk5LjYzNyAyLjggTCA5Ni4wMzcgMi44IEMgOTUuNjM3IDIuOCA5NS40MzcgMyA5NS4zMzcgMy4zIFoiPjwvcGF0aD48L3N2Zz4" /> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAxIDMyIiB4bWxucz0iaHR0cDomI3gyRjsmI3gyRjt3d3cudzMub3JnJiN4MkY7MjAwMCYjeDJGO3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9IkJsdWUiIGZpbGw9IiNmZmZmZmYiPjxnIGlkPSJMb2dvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNi4wMDAwMDApIj48cGF0aCBkPSJNMTYuNjY2MDQ4NCwwLjE4IEMxNy4zNDY2NjI2LDEuMzM5MDk5MSAxNy42NTM1MDY5LDIuNTMyOTcyOTcgMTcuNjUzNTA2OSw0LjA0MTA4MTA4IEMxNy42NTM1MDY5LDguODUxMTcxMTcgMTMuNjcxMzQ2LDE1LjA5OTgxOTggMTAuNDM5MzQ2LDE5LjQ4NzU2NzYgTDMuMDU3MjU5NTIsMTkuNDg3NTY3NiBMMC4wOTY2MzE0ODc5LDEuMjMzMTUzMTUgTDYuNTYwNDU2NzUsMC42MDAzNjAzNiBMOC4xMjU3ODIwMSwxMy41ODk1NDk1IEM5LjU4ODM1OTg2LDExLjEzMjYxMjYgMTEuMzkzMjU0Myw3LjI3MTUzMTUzIDExLjM5MzI1NDMsNC42MzkwOTkxIEMxMS4zOTMyNTQzLDMuMTk4MTk4MiAxMS4xNTM4NTk5LDIuMjE2NzU2NzYgMTAuNzc5NzQwNSwxLjQwODY0ODY1IEwxNi42NjYwNDg0LDAuMTggWiBNMjQuOTA3MTU5MiwxMS42OTM4NzM5IEMyNC45MDcxNTkyLDEzLjgzNjc1NjggMjYuMDYyNzE4LDE0LjY3NzQ3NzUgMjcuNTk0NjY3OCwxNC42Nzc0Nzc1IEMyOS4yNjI5MTUyLDE0LjY3NzQ3NzUgMzAuODYwMjE4LDE0LjI1NzExNzEgMzIuOTM2MzA5NywxMy4xNjkxODkyIEwzMi4xNTQzNDYsMTguNjQ0NTA0NSBDMzAuNjkxNTkzNCwxOS4zODE0NDE0IDI4LjQxMTkyOTEsMTkuODczMTUzMiAyNi4xOTkxOTAzLDE5Ljg3MzE1MzIgQzIwLjU4NjM1MTIsMTkuODczMTUzMiAxOC41Nzc1MzQ2LDE2LjM2MzI0MzIgMTguNTc3NTM0NiwxMS45NzUzMTUzIEMxOC41Nzc1MzQ2LDYuMjg4MTA4MTEgMjEuODQ1MTgxNywwLjI0OTM2OTM2OSAyOC41ODE5NTE2LDAuMjQ5MzY5MzY5IEMzMi4yOTA5OTMxLDAuMjQ5MzY5MzY5IDM0LjM2NDk4NzksMi4zOTIwNzIwNyAzNC4zNjQ5ODc5LDUuMzc1Njc1NjggQzM0LjM2NTMzNzQsMTAuMTg1NTg1NiAyOC4zNzgzNzg5LDExLjY1OTA5OTEgMjQuOTA3MTU5MiwxMS42OTM4NzM5IFogTTI1LjA0MzQ1NjcsOC4yMTgxOTgyIEMyNi4yMzI5MTUyLDguMjE4MTk4MiAyOS4yMjc0NDI5LDcuNjU3MTE3MTIgMjkuMjI3NDQyOSw1LjkwMjE2MjE2IEMyOS4yMjc0NDI5LDUuMDU5NDU5NDYgMjguNjQ5NTc2MSw0LjYzOTA5OTEgMjcuOTY4NjEyNSw0LjYzOTA5OTEgQzI2Ljc3NzIzMTgsNC42MzkwOTkxIDI1LjIxMzgyODcsNi4xMTIyNTIyNSAyNS4wNDM0NTY3LDguMjE4MTk4MiBaIE01My4wMTg3MDkzLDQuNDYzNjAzNiBDNTMuMDE4NzA5Myw1LjE2NTU4NTU5IDUyLjkxNTQzNzcsNi4xODM3ODM3OCA1Mi44MTI2OTAzLDYuODQ5MTg5MTkgTDUwLjg3MzA3MDksMTkuNDg3Mzg3NCBMNDQuNTc5MDkzNCwxOS40ODczODc0IEw0Ni4zNDgzNDA4LDcuOTAyMTYyMTYgQzQ2LjM4MTg5MSw3LjU4NzkyNzkzIDQ2LjQ4NDk4NzksNi45NTUzMTUzMiA0Ni40ODQ5ODc5LDYuNjA0MzI0MzIgQzQ2LjQ4NDk4NzksNS43NjE2MjE2MiA0NS45NzQzOTYyLDUuNTUxMzUxMzUgNDUuMzYwNTMyOSw1LjU1MTM1MTM1IEM0NC41NDUxOTM4LDUuNTUxMzUxMzUgNDMuNzI3OTMyNSw1LjkzNzExNzEyIDQzLjE4MzYxNTksNi4yMTg3Mzg3NCBMNDEuMTc2ODk2MiwxOS40ODc1Njc2IEwzNC44NDc0NDY0LDE5LjQ4NzU2NzYgTDM3LjczOTA1MTksMC41NjU5NDU5NDYgTDQzLjIxNzE2NjEsMC41NjU5NDU5NDYgTDQzLjI4NjUzODEsMi4wNzYyMTYyMiBDNDQuNTc4OTE4NywxLjE5ODczODc0IDQ2LjI4MDcxNjMsMC4yNDk3Mjk3MyA0OC42OTUyODAzLDAuMjQ5NzI5NzMgQzUxLjg5NDI1NDMsMC4yNDkzNjkzNjkgNTMuMDE4NzA5MywxLjkzNDk1NDk1IDUzLjAxODcwOTMsNC40NjM2MDM2IFogTTcxLjcwMzcwOTMsMi4zMjA3MjA3MiBDNzMuNTA2MzMyMiwwLjk4ODEwODEwOCA3NS4yMDg0NzkyLDAuMjQ5MzY5MzY5IDc3LjU1NTQxODcsMC4yNDkzNjkzNjkgQzgwLjc4NzI0MzksMC4yNDkzNjkzNjkgODEuOTExMzQ5NSwxLjkzNDk1NDk1IDgxLjkxMTM0OTUsNC40NjM2MDM2IEM4MS45MTEzNDk1LDUuMTY1NTg1NTkgODEuODA4NDI3Myw2LjE4Mzc4Mzc4IDgxLjcwNTY3OTksNi44NDkxODkxOSBMNzkuNzY4MzMyMiwxOS40ODczODc0IEw3My40NzI2MDczLDE5LjQ4NzM4NzQgTDc1LjI3NTU3OTYsNy42NTcyOTczIEM3NS4zMDg3ODAzLDcuMzQxMDgxMDggNzUuMzc4NTAxNyw2Ljk1NTMxNTMyIDc1LjM3ODUwMTcsNi43MTA2MzA2MyBDNzUuMzc4NTAxNyw1Ljc2MTgwMTggNzQuODY3NzM1Myw1LjU1MTM1MTM1IDc0LjI1NDA0NjcsNS41NTEzNTEzNSBDNzMuNDcyMjU3OCw1LjU1MTM1MTM1IDcyLjY5MDgxODMsNS45MDIzNDIzNCA3Mi4xMTA2Nzk5LDYuMjE4NzM4NzQgTDcwLjEwNDMwOTcsMTkuNDg3NTY3NiBMNjMuODEwMTU3NCwxOS40ODc1Njc2IEw2NS42MTMxMjk4LDcuNjU3NDc3NDggQzY1LjY0NjMzMDQsNy4zNDEyNjEyNiA2NS43MTM5NTUsNi45NTU0OTU1IDY1LjcxMzk1NSw2LjcxMDgxMDgxIEM2NS43MTM5NTUsNS43NjE5ODE5OCA2NS4yMDMwMTM4LDUuNTUxNTMxNTMgNjQuNTkxNDIyMSw1LjU1MTUzMTUzIEM2My43NzQzMzU2LDUuNTUxNTMxNTMgNjIuOTU4ODIxOCw1LjkzNzI5NzMgNjIuNDE0NTA1Miw2LjIxODkxODkyIEw2MC40MDYyMTI4LDE5LjQ4Nzc0NzcgTDU0LjA3ODg1OTksMTkuNDg3NzQ3NyBMNTYuOTcwMTE1OSwwLjU2NjEyNjEyNiBMNjIuMzgxMzA0NSwwLjU2NjEyNjEyNiBMNjIuNTUxMzI3LDIuMTQ1NzY1NzcgQzYzLjgxMDE1NzQsMS4xOTkwOTkxIDY1LjUxMDU1NzEsMC4yNTAwOTAwOSA2Ny43OTAwNDY3LDAuMjUwMDkwMDkgQzY5Ljc2Mzc0MDUsMC4yNDkzNjkzNjkgNzEuMDU1OTQ2NCwxLjEyNzAyNzAzIDcxLjcwMzcwOTMsMi4zMjA3MjA3MiBaIE04My41NTA1OSwxMS43OTk4MTk4IEM4My41NTA1OSw1LjgzMjc5Mjc5IDg2LjYxMjA0MzMsMC4yNDkzNjkzNjkgOTMuNjU1ODMyMiwwLjI0OTM2OTM2OSBDOTguOTYzMzk5NywwLjI0OTM2OTM2OSAxMDAuOTAzNTQzLDMuNDc5ODE5ODIgMTAwLjkwMzU0Myw3LjkzODczODc0IEMxMDAuOTAzNTQzLDEzLjgzNjU3NjYgOTcuODc1MTE1OSwxOS45NDQzMjQzIDkwLjY2MTQ3OTIsMTkuOTQ0MzI0MyBDODUuMzE5NjYyNiwxOS45NDQzMjQzIDgzLjU1MDU5LDE2LjMyODEwODEgODMuNTUwNTksMTEuNzk5ODE5OCBaIE05NC40Mzc0NDY0LDcuODMyNzkyNzkgQzk0LjQzNzQ0NjQsNi4yODgxMDgxMSA5NC4wNjI4MDI4LDUuMjM0OTU0OTUgOTIuOTQwOTY4OSw1LjIzNDk1NDk1IEM5MC40NTcwMzI5LDUuMjM0OTU0OTUgODkuOTQ2OTY1NCw5Ljc2MzA2MzA2IDg5Ljk0Njk2NTQsMTIuMDc5NDU5NSBDODkuOTQ2OTY1NCwxMy44MzY3NTY4IDkwLjQyMzgzMjIsMTQuOTI0MzI0MyA5MS41NDUzMTY2LDE0LjkyNDMyNDMgQzkzLjg5MzEyOTgsMTQuOTI0MzI0MyA5NC40Mzc0NDY0LDEwLjE0OTAwOSA5NC40Mzc0NDY0LDcuODMyNzkyNzkgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg" /> Two easy ways to pay |
| `false` | Disable tagline text.                                | <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxcHgiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAxMDEgMzIiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHhtbG5zPSJodHRwOiYjeDJGOyYjeDJGO3d3dy53My5vcmcmI3gyRjsyMDAwJiN4MkY7c3ZnIj48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDEyLjIzNyAyLjggTCA0LjQzNyAyLjggQyAzLjkzNyAyLjggMy40MzcgMy4yIDMuMzM3IDMuNyBMIDAuMjM3IDIzLjcgQyAwLjEzNyAyNC4xIDAuNDM3IDI0LjQgMC44MzcgMjQuNCBMIDQuNTM3IDI0LjQgQyA1LjAzNyAyNC40IDUuNTM3IDI0IDUuNjM3IDIzLjUgTCA2LjQzNyAxOC4xIEMgNi41MzcgMTcuNiA2LjkzNyAxNy4yIDcuNTM3IDE3LjIgTCAxMC4wMzcgMTcuMiBDIDE1LjEzNyAxNy4yIDE4LjEzNyAxNC43IDE4LjkzNyA5LjggQyAxOS4yMzcgNy43IDE4LjkzNyA2IDE3LjkzNyA0LjggQyAxNi44MzcgMy41IDE0LjgzNyAyLjggMTIuMjM3IDIuOCBaIE0gMTMuMTM3IDEwLjEgQyAxMi43MzcgMTIuOSAxMC41MzcgMTIuOSA4LjUzNyAxMi45IEwgNy4zMzcgMTIuOSBMIDguMTM3IDcuNyBDIDguMTM3IDcuNCA4LjQzNyA3LjIgOC43MzcgNy4yIEwgOS4yMzcgNy4yIEMgMTAuNjM3IDcuMiAxMS45MzcgNy4yIDEyLjYzNyA4IEMgMTMuMTM3IDguNCAxMy4zMzcgOS4xIDEzLjEzNyAxMC4xIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDM1LjQzNyAxMCBMIDMxLjczNyAxMCBDIDMxLjQzNyAxMCAzMS4xMzcgMTAuMiAzMS4xMzcgMTAuNSBMIDMwLjkzNyAxMS41IEwgMzAuNjM3IDExLjEgQyAyOS44MzcgOS45IDI4LjAzNyA5LjUgMjYuMjM3IDkuNSBDIDIyLjEzNyA5LjUgMTguNjM3IDEyLjYgMTcuOTM3IDE3IEMgMTcuNTM3IDE5LjIgMTguMDM3IDIxLjMgMTkuMzM3IDIyLjcgQyAyMC40MzcgMjQgMjIuMTM3IDI0LjYgMjQuMDM3IDI0LjYgQyAyNy4zMzcgMjQuNiAyOS4yMzcgMjIuNSAyOS4yMzcgMjIuNSBMIDI5LjAzNyAyMy41IEMgMjguOTM3IDIzLjkgMjkuMjM3IDI0LjMgMjkuNjM3IDI0LjMgTCAzMy4wMzcgMjQuMyBDIDMzLjUzNyAyNC4zIDM0LjAzNyAyMy45IDM0LjEzNyAyMy40IEwgMzYuMTM3IDEwLjYgQyAzNi4yMzcgMTAuNCAzNS44MzcgMTAgMzUuNDM3IDEwIFogTSAzMC4zMzcgMTcuMiBDIDI5LjkzNyAxOS4zIDI4LjMzNyAyMC44IDI2LjEzNyAyMC44IEMgMjUuMDM3IDIwLjggMjQuMjM3IDIwLjUgMjMuNjM3IDE5LjggQyAyMy4wMzcgMTkuMSAyMi44MzcgMTguMiAyMy4wMzcgMTcuMiBDIDIzLjMzNyAxNS4xIDI1LjEzNyAxMy42IDI3LjIzNyAxMy42IEMgMjguMzM3IDEzLjYgMjkuMTM3IDE0IDI5LjczNyAxNC42IEMgMzAuMjM3IDE1LjMgMzAuNDM3IDE2LjIgMzAuMzM3IDE3LjIgWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDMwODciIGQ9Ik0gNTUuMzM3IDEwIEwgNTEuNjM3IDEwIEMgNTEuMjM3IDEwIDUwLjkzNyAxMC4yIDUwLjczNyAxMC41IEwgNDUuNTM3IDE4LjEgTCA0My4zMzcgMTAuOCBDIDQzLjIzNyAxMC4zIDQyLjczNyAxMCA0Mi4zMzcgMTAgTCAzOC42MzcgMTAgQyAzOC4yMzcgMTAgMzcuODM3IDEwLjQgMzguMDM3IDEwLjkgTCA0Mi4xMzcgMjMgTCAzOC4yMzcgMjguNCBDIDM3LjkzNyAyOC44IDM4LjIzNyAyOS40IDM4LjczNyAyOS40IEwgNDIuNDM3IDI5LjQgQyA0Mi44MzcgMjkuNCA0My4xMzcgMjkuMiA0My4zMzcgMjguOSBMIDU1LjgzNyAxMC45IEMgNTYuMTM3IDEwLjYgNTUuODM3IDEwIDU1LjMzNyAxMCBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA2Ny43MzcgMi44IEwgNTkuOTM3IDIuOCBDIDU5LjQzNyAyLjggNTguOTM3IDMuMiA1OC44MzcgMy43IEwgNTUuNzM3IDIzLjYgQyA1NS42MzcgMjQgNTUuOTM3IDI0LjMgNTYuMzM3IDI0LjMgTCA2MC4zMzcgMjQuMyBDIDYwLjczNyAyNC4zIDYxLjAzNyAyNCA2MS4wMzcgMjMuNyBMIDYxLjkzNyAxOCBDIDYyLjAzNyAxNy41IDYyLjQzNyAxNy4xIDYzLjAzNyAxNy4xIEwgNjUuNTM3IDE3LjEgQyA3MC42MzcgMTcuMSA3My42MzcgMTQuNiA3NC40MzcgOS43IEMgNzQuNzM3IDcuNiA3NC40MzcgNS45IDczLjQzNyA0LjcgQyA3Mi4yMzcgMy41IDcwLjMzNyAyLjggNjcuNzM3IDIuOCBaIE0gNjguNjM3IDEwLjEgQyA2OC4yMzcgMTIuOSA2Ni4wMzcgMTIuOSA2NC4wMzcgMTIuOSBMIDYyLjgzNyAxMi45IEwgNjMuNjM3IDcuNyBDIDYzLjYzNyA3LjQgNjMuOTM3IDcuMiA2NC4yMzcgNy4yIEwgNjQuNzM3IDcuMiBDIDY2LjEzNyA3LjIgNjcuNDM3IDcuMiA2OC4xMzcgOCBDIDY4LjYzNyA4LjQgNjguNzM3IDkuMSA2OC42MzcgMTAuMSBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5MC45MzcgMTAgTCA4Ny4yMzcgMTAgQyA4Ni45MzcgMTAgODYuNjM3IDEwLjIgODYuNjM3IDEwLjUgTCA4Ni40MzcgMTEuNSBMIDg2LjEzNyAxMS4xIEMgODUuMzM3IDkuOSA4My41MzcgOS41IDgxLjczNyA5LjUgQyA3Ny42MzcgOS41IDc0LjEzNyAxMi42IDczLjQzNyAxNyBDIDczLjAzNyAxOS4yIDczLjUzNyAyMS4zIDc0LjgzNyAyMi43IEMgNzUuOTM3IDI0IDc3LjYzNyAyNC42IDc5LjUzNyAyNC42IEMgODIuODM3IDI0LjYgODQuNzM3IDIyLjUgODQuNzM3IDIyLjUgTCA4NC41MzcgMjMuNSBDIDg0LjQzNyAyMy45IDg0LjczNyAyNC4zIDg1LjEzNyAyNC4zIEwgODguNTM3IDI0LjMgQyA4OS4wMzcgMjQuMyA4OS41MzcgMjMuOSA4OS42MzcgMjMuNCBMIDkxLjYzNyAxMC42IEMgOTEuNjM3IDEwLjQgOTEuMzM3IDEwIDkwLjkzNyAxMCBaIE0gODUuNzM3IDE3LjIgQyA4NS4zMzcgMTkuMyA4My43MzcgMjAuOCA4MS41MzcgMjAuOCBDIDgwLjQzNyAyMC44IDc5LjYzNyAyMC41IDc5LjAzNyAxOS44IEMgNzguNDM3IDE5LjEgNzguMjM3IDE4LjIgNzguNDM3IDE3LjIgQyA3OC43MzcgMTUuMSA4MC41MzcgMTMuNiA4Mi42MzcgMTMuNiBDIDgzLjczNyAxMy42IDg0LjUzNyAxNCA4NS4xMzcgMTQuNiBDIDg1LjczNyAxNS4zIDg1LjkzNyAxNi4yIDg1LjczNyAxNy4yIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDA5Y2RlIiBkPSJNIDk1LjMzNyAzLjMgTCA5Mi4xMzcgMjMuNiBDIDkyLjAzNyAyNCA5Mi4zMzcgMjQuMyA5Mi43MzcgMjQuMyBMIDk1LjkzNyAyNC4zIEMgOTYuNDM3IDI0LjMgOTYuOTM3IDIzLjkgOTcuMDM3IDIzLjQgTCAxMDAuMjM3IDMuNSBDIDEwMC4zMzcgMy4xIDEwMC4wMzcgMi44IDk5LjYzNyAyLjggTCA5Ni4wMzcgMi44IEMgOTUuNjM3IDIuOCA5NS40MzcgMyA5NS4zMzcgMy4zIFoiPjwvcGF0aD48L3N2Zz4" /> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAxIDMyIiB4bWxucz0iaHR0cDomI3gyRjsmI3gyRjt3d3cudzMub3JnJiN4MkY7MjAwMCYjeDJGO3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9IkJsdWUiIGZpbGw9IiNmZmZmZmYiPjxnIGlkPSJMb2dvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNi4wMDAwMDApIj48cGF0aCBkPSJNMTYuNjY2MDQ4NCwwLjE4IEMxNy4zNDY2NjI2LDEuMzM5MDk5MSAxNy42NTM1MDY5LDIuNTMyOTcyOTcgMTcuNjUzNTA2OSw0LjA0MTA4MTA4IEMxNy42NTM1MDY5LDguODUxMTcxMTcgMTMuNjcxMzQ2LDE1LjA5OTgxOTggMTAuNDM5MzQ2LDE5LjQ4NzU2NzYgTDMuMDU3MjU5NTIsMTkuNDg3NTY3NiBMMC4wOTY2MzE0ODc5LDEuMjMzMTUzMTUgTDYuNTYwNDU2NzUsMC42MDAzNjAzNiBMOC4xMjU3ODIwMSwxMy41ODk1NDk1IEM5LjU4ODM1OTg2LDExLjEzMjYxMjYgMTEuMzkzMjU0Myw3LjI3MTUzMTUzIDExLjM5MzI1NDMsNC42MzkwOTkxIEMxMS4zOTMyNTQzLDMuMTk4MTk4MiAxMS4xNTM4NTk5LDIuMjE2NzU2NzYgMTAuNzc5NzQwNSwxLjQwODY0ODY1IEwxNi42NjYwNDg0LDAuMTggWiBNMjQuOTA3MTU5MiwxMS42OTM4NzM5IEMyNC45MDcxNTkyLDEzLjgzNjc1NjggMjYuMDYyNzE4LDE0LjY3NzQ3NzUgMjcuNTk0NjY3OCwxNC42Nzc0Nzc1IEMyOS4yNjI5MTUyLDE0LjY3NzQ3NzUgMzAuODYwMjE4LDE0LjI1NzExNzEgMzIuOTM2MzA5NywxMy4xNjkxODkyIEwzMi4xNTQzNDYsMTguNjQ0NTA0NSBDMzAuNjkxNTkzNCwxOS4zODE0NDE0IDI4LjQxMTkyOTEsMTkuODczMTUzMiAyNi4xOTkxOTAzLDE5Ljg3MzE1MzIgQzIwLjU4NjM1MTIsMTkuODczMTUzMiAxOC41Nzc1MzQ2LDE2LjM2MzI0MzIgMTguNTc3NTM0NiwxMS45NzUzMTUzIEMxOC41Nzc1MzQ2LDYuMjg4MTA4MTEgMjEuODQ1MTgxNywwLjI0OTM2OTM2OSAyOC41ODE5NTE2LDAuMjQ5MzY5MzY5IEMzMi4yOTA5OTMxLDAuMjQ5MzY5MzY5IDM0LjM2NDk4NzksMi4zOTIwNzIwNyAzNC4zNjQ5ODc5LDUuMzc1Njc1NjggQzM0LjM2NTMzNzQsMTAuMTg1NTg1NiAyOC4zNzgzNzg5LDExLjY1OTA5OTEgMjQuOTA3MTU5MiwxMS42OTM4NzM5IFogTTI1LjA0MzQ1NjcsOC4yMTgxOTgyIEMyNi4yMzI5MTUyLDguMjE4MTk4MiAyOS4yMjc0NDI5LDcuNjU3MTE3MTIgMjkuMjI3NDQyOSw1LjkwMjE2MjE2IEMyOS4yMjc0NDI5LDUuMDU5NDU5NDYgMjguNjQ5NTc2MSw0LjYzOTA5OTEgMjcuOTY4NjEyNSw0LjYzOTA5OTEgQzI2Ljc3NzIzMTgsNC42MzkwOTkxIDI1LjIxMzgyODcsNi4xMTIyNTIyNSAyNS4wNDM0NTY3LDguMjE4MTk4MiBaIE01My4wMTg3MDkzLDQuNDYzNjAzNiBDNTMuMDE4NzA5Myw1LjE2NTU4NTU5IDUyLjkxNTQzNzcsNi4xODM3ODM3OCA1Mi44MTI2OTAzLDYuODQ5MTg5MTkgTDUwLjg3MzA3MDksMTkuNDg3Mzg3NCBMNDQuNTc5MDkzNCwxOS40ODczODc0IEw0Ni4zNDgzNDA4LDcuOTAyMTYyMTYgQzQ2LjM4MTg5MSw3LjU4NzkyNzkzIDQ2LjQ4NDk4NzksNi45NTUzMTUzMiA0Ni40ODQ5ODc5LDYuNjA0MzI0MzIgQzQ2LjQ4NDk4NzksNS43NjE2MjE2MiA0NS45NzQzOTYyLDUuNTUxMzUxMzUgNDUuMzYwNTMyOSw1LjU1MTM1MTM1IEM0NC41NDUxOTM4LDUuNTUxMzUxMzUgNDMuNzI3OTMyNSw1LjkzNzExNzEyIDQzLjE4MzYxNTksNi4yMTg3Mzg3NCBMNDEuMTc2ODk2MiwxOS40ODc1Njc2IEwzNC44NDc0NDY0LDE5LjQ4NzU2NzYgTDM3LjczOTA1MTksMC41NjU5NDU5NDYgTDQzLjIxNzE2NjEsMC41NjU5NDU5NDYgTDQzLjI4NjUzODEsMi4wNzYyMTYyMiBDNDQuNTc4OTE4NywxLjE5ODczODc0IDQ2LjI4MDcxNjMsMC4yNDk3Mjk3MyA0OC42OTUyODAzLDAuMjQ5NzI5NzMgQzUxLjg5NDI1NDMsMC4yNDkzNjkzNjkgNTMuMDE4NzA5MywxLjkzNDk1NDk1IDUzLjAxODcwOTMsNC40NjM2MDM2IFogTTcxLjcwMzcwOTMsMi4zMjA3MjA3MiBDNzMuNTA2MzMyMiwwLjk4ODEwODEwOCA3NS4yMDg0NzkyLDAuMjQ5MzY5MzY5IDc3LjU1NTQxODcsMC4yNDkzNjkzNjkgQzgwLjc4NzI0MzksMC4yNDkzNjkzNjkgODEuOTExMzQ5NSwxLjkzNDk1NDk1IDgxLjkxMTM0OTUsNC40NjM2MDM2IEM4MS45MTEzNDk1LDUuMTY1NTg1NTkgODEuODA4NDI3Myw2LjE4Mzc4Mzc4IDgxLjcwNTY3OTksNi44NDkxODkxOSBMNzkuNzY4MzMyMiwxOS40ODczODc0IEw3My40NzI2MDczLDE5LjQ4NzM4NzQgTDc1LjI3NTU3OTYsNy42NTcyOTczIEM3NS4zMDg3ODAzLDcuMzQxMDgxMDggNzUuMzc4NTAxNyw2Ljk1NTMxNTMyIDc1LjM3ODUwMTcsNi43MTA2MzA2MyBDNzUuMzc4NTAxNyw1Ljc2MTgwMTggNzQuODY3NzM1Myw1LjU1MTM1MTM1IDc0LjI1NDA0NjcsNS41NTEzNTEzNSBDNzMuNDcyMjU3OCw1LjU1MTM1MTM1IDcyLjY5MDgxODMsNS45MDIzNDIzNCA3Mi4xMTA2Nzk5LDYuMjE4NzM4NzQgTDcwLjEwNDMwOTcsMTkuNDg3NTY3NiBMNjMuODEwMTU3NCwxOS40ODc1Njc2IEw2NS42MTMxMjk4LDcuNjU3NDc3NDggQzY1LjY0NjMzMDQsNy4zNDEyNjEyNiA2NS43MTM5NTUsNi45NTU0OTU1IDY1LjcxMzk1NSw2LjcxMDgxMDgxIEM2NS43MTM5NTUsNS43NjE5ODE5OCA2NS4yMDMwMTM4LDUuNTUxNTMxNTMgNjQuNTkxNDIyMSw1LjU1MTUzMTUzIEM2My43NzQzMzU2LDUuNTUxNTMxNTMgNjIuOTU4ODIxOCw1LjkzNzI5NzMgNjIuNDE0NTA1Miw2LjIxODkxODkyIEw2MC40MDYyMTI4LDE5LjQ4Nzc0NzcgTDU0LjA3ODg1OTksMTkuNDg3NzQ3NyBMNTYuOTcwMTE1OSwwLjU2NjEyNjEyNiBMNjIuMzgxMzA0NSwwLjU2NjEyNjEyNiBMNjIuNTUxMzI3LDIuMTQ1NzY1NzcgQzYzLjgxMDE1NzQsMS4xOTkwOTkxIDY1LjUxMDU1NzEsMC4yNTAwOTAwOSA2Ny43OTAwNDY3LDAuMjUwMDkwMDkgQzY5Ljc2Mzc0MDUsMC4yNDkzNjkzNjkgNzEuMDU1OTQ2NCwxLjEyNzAyNzAzIDcxLjcwMzcwOTMsMi4zMjA3MjA3MiBaIE04My41NTA1OSwxMS43OTk4MTk4IEM4My41NTA1OSw1LjgzMjc5Mjc5IDg2LjYxMjA0MzMsMC4yNDkzNjkzNjkgOTMuNjU1ODMyMiwwLjI0OTM2OTM2OSBDOTguOTYzMzk5NywwLjI0OTM2OTM2OSAxMDAuOTAzNTQzLDMuNDc5ODE5ODIgMTAwLjkwMzU0Myw3LjkzODczODc0IEMxMDAuOTAzNTQzLDEzLjgzNjU3NjYgOTcuODc1MTE1OSwxOS45NDQzMjQzIDkwLjY2MTQ3OTIsMTkuOTQ0MzI0MyBDODUuMzE5NjYyNiwxOS45NDQzMjQzIDgzLjU1MDU5LDE2LjMyODEwODEgODMuNTUwNTksMTEuNzk5ODE5OCBaIE05NC40Mzc0NDY0LDcuODMyNzkyNzkgQzk0LjQzNzQ0NjQsNi4yODgxMDgxMSA5NC4wNjI4MDI4LDUuMjM0OTU0OTUgOTIuOTQwOTY4OSw1LjIzNDk1NDk1IEM5MC40NTcwMzI5LDUuMjM0OTU0OTUgODkuOTQ2OTY1NCw5Ljc2MzA2MzA2IDg5Ljk0Njk2NTQsMTIuMDc5NDU5NSBDODkuOTQ2OTY1NCwxMy44MzY3NTY4IDkwLjQyMzgzMjIsMTQuOTI0MzI0MyA5MS41NDUzMTY2LDE0LjkyNDMyNDMgQzkzLjg5MzEyOTgsMTQuOTI0MzI0MyA5NC40Mzc0NDY0LDEwLjE0OTAwOSA5NC40Mzc0NDY0LDcuODMyNzkyNzkgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg" />                      |

### Message [#message]

Customize the message with your buttons using the `message` option.

> **Note:** Messaging is currently supported for US merchants and US customers only.
> Merchants must be eligible for Pay Later to display Pay Later offers with
> buttons. Other PayPal value propositions appear, even if a merchant is
> ineligible for Pay Later.

```javascript lineNumbers
paypal
  .Buttons({
    message: {
      amount: 100,
      align: "center",
      color: "black",
      position: "top",
    },
  })
  .render("#paypal-button-container");
```

#### Amount [#amount]

Set the `message.amount` option to show the most relevant offer and price breakdown to your customers.

To define the amount of the message, set the `message.amount` option to a number that is greater than `0`. This value should reflect the current product or cart value that will be used once a checkout session has started.

| Value       | Description                                                                   | Message                                |
| ----------- | ----------------------------------------------------------------------------- | -------------------------------------- |
| `undefined` | **Default**. When no amount value is provided a generic message is shown.     | <PayPalMessagePreview />               |
| `100`       | An example qualifying amount for Pay in 4 with a weekly amount breakdown.     | <PayPalMessagePreview amount="100" />  |
| `2000`      | An example qualifying amount for Pay Monthly with a monthly amount breakdown. | <PayPalMessagePreview amount="2000" /> |

#### Align [#align]

Set the `message.align` option to align the message content to the buttons.

| Value    | Description                                                          | Message                                              |
| -------- | -------------------------------------------------------------------- | ---------------------------------------------------- |
| `center` | **Default**. Aligned in the center between the edges of the buttons. | <PayPalMessagePreview amount="100" align="center" /> |
| `left`   | Aligned to the left edge of the buttons.                             | <PayPalMessagePreview amount="100" align="left" />   |
| `right`  | Aligned to the right edge of the buttons.                            | <PayPalMessagePreview amount="100" align="right" />  |

#### Color [#color-1]

Set the `message.color` option to change the message color from `black` or `white` depending your website background so the message is visible.

| Value   | Description                                                            | Message                                             |
| ------- | ---------------------------------------------------------------------- | --------------------------------------------------- |
| `black` | **Default**. Black text with a colored PayPal logo and blue link text. | <PayPalMessagePreview amount="100" color="black" /> |
| `white` | White text with a white PayPal logo and white link text.               | <PayPalMessagePreview amount="100" color="white" /> |

#### Position [#position]

Set the `message.position` option to place the message above or below the buttons.

Value

Description

Message

`top`

Position the message above the buttons.

<PayPalMessagePreview amount="100" position="top" />

`bottom`

**Default**. Position the message below the buttons.

> **Note:** When the Debit/Credit Card button is present as part of your button stack only 
>
> `top`
>
>  is supported and will be the default value.

<PayPalMessagePreview amount="100" position="bottom" />

### displayOnly [#displayonly]

The `displayOnly` parameter determines the payment methods your customers see. By default, buyers see all eligible payment methods. Options passed to `displayOnly` are applied in order from left to right.

We have the following options available:

| Value       | Description                                                                                                                                                                                          |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `vaultable` | Display only the [payment methods that support save](/docs/checkout/save-payment-methods/). Your integration, merchant settings, and customer location determine which payment methods can be saved. |

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    displayOnly: ["vaultable"],
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const displayOnly = ["vaultable"];

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons displayOnly={displayOnly} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const displayOnly: PayPalButtonsComponentProps["displayOnly"] = ["vaultable"];

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons displayOnly={displayOnly}/>
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        displayOnly: ["vaultable"],
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### createOrder [#createorder]

The `createOrder` function sets up the details of the transaction. Pass `createOrder` as a parameter in `paypal.Buttons`. When the buyer selects the PayPal button, `createOrder` launches the PayPal Checkout window. The buyer logs in and approves the transaction on the `paypal.com` website.

#### createOrder [#createorder-1]

#### Vanilla JS

```javascript lineNumbers
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- Set up a container element for the button -->
        <div id="paypal-button-container"></div>

        <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>

        <script>
            paypal.Buttons({
                async createOrder() {
                    const response = await fetch("/my-server/create-paypal-order", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            cart: [{
                                sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                                quantity: "YOUR_PRODUCT_QUANTITY",
                            }]
                        })
                    });

                    const order = await response.json();

                    return order.id;
                }
            }).render('#paypal-button-container');
        </script>
    </body>
</html>

```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const createOrder = async () => {
    try {
      const response = await fetch("/my-server/create-paypal-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          cart: [{ id: "YOUR_PRODUCT_ID", quantity: "YOUR_PRODUCT_QUANTITY" }],
        }),
      });

      const orderData = await response.json();

      if (!orderData.id) {
        const errorDetail = orderData.details[0];
        const errorMessage = errorDetail
          ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
          : "Unexpected error occurred, please try again.";

        throw new Error(errorMessage);
      }

      return orderData.id;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons createOrder={createOrder} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

interface OrderData {
    id: string;
    details?: Array<{
      issue: string;
      description: string;
    }>;
    debug_id?: string;
}

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const createOrder: PayPalButtonsComponentProps["createOrder"] = async () => {
        try {
            const response = await fetch("/my-server/create-paypal-order", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    cart: [{ id: "YOUR_PRODUCT_ID", quantity: "YOUR_PRODUCT_QUANTITY" }],
                }),
            });

          const orderData: OrderData = await response.json();

          if (!orderData.id) {
              const errorDetail = orderData?.details?.[0];
              const errorMessage = errorDetail
                  ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                  : "Unexpected error occurred, please try again.";

              throw new Error(errorMessage);
          }

          return orderData.id;

        } catch (error) {
            console.error(error);
            throw error;
        }
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons createOrder={createOrder} />
            </PayPalScriptProvider>
        </div>
  );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({ clientId: "YOUR_CLIENT_ID" });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        async createOrder() {
          try {
            const response = await fetch("/my-server/create-paypal-order", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                cart: [
                  { id: "YOUR_PRODUCT_ID", quantity: "YOUR_PRODUCT_QUANTITY" },
                ],
              }),
            });

            const orderData = await response.json();

            if (!orderData.id) {
              const errorDetail = orderData.details[0];
              const errorMessage = errorDetail
                ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                : "Unexpected error occurred, please try again.";

              throw new Error(errorMessage);
            }

            return orderData.id;
          } catch (error) {
            console.error(error);
            throw error;
          }
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

#### Server (Node.js): [#server-nodejs]

```javascript lineNumbers

app.post("/my-server/create-paypal-order", async (req, res) => {
  const order = await createOrder();
  res.json(order);
});

// use the orders api to create an order
function createOrder() {
  // create accessToken using your clientID and clientSecret
  // for the full stack example, please see the Standard Integration guide
  // https://developer.paypal.com/docs/multiparty/checkout/standard/integrate/
  const accessToken = "REPLACE_WITH_YOUR_ACCESS_TOKEN";
  return fetch("https://api-m.sandbox.paypal.com/v2/checkout/orders", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({
      "purchase_units": [
        {
          "amount": {
            "currency_code": "USD",
            "value": "100.00"
          },
          "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b"
        }
      ],
      "intent": "CAPTURE",
      "payment_source": {
        "paypal": {
          "experience_context": {
            "payment_method_preference": "IMMEDIATE_PAYMENT_REQUIRED",
            "payment_method_selected": "PAYPAL",
            "brand_name": "EXAMPLE INC",
            "locale": "en-US",
            "landing_page": "LOGIN",
            "shipping_preference": "GET_FROM_FILE",
            "user_action": "PAY_NOW",
            "return_url": "https://example.com/returnUrl",
            "cancel_url": "https://example.com/cancelUrl"
          }
        }
      }
    })
  })
  .then((response) => response.json());
}

```

#### Orders v2 API options [#orders-v2-api-options]

* `intent`: The intent to either capture the payment immediately or authorize a payment for an order after order creation. The values are:
  * `CAPTURE`: **Default**. The merchant intends to capture payment immediately after the customer makes a payment.
  * `AUTHORIZE`: The merchant intends to authorize a payment and place funds on hold after the customer makes a payment. Confirm the successful capture before providing goods or services. Authorized payments can be captured for up to 3 days, and may extend up to 29 days. After the 3-day honor period, the original authorized payment expires and you need to re-authorize the payment. You need to make a separate request to capture payments on demand. This intent isn't supported when you have more than 1 `purchase_unit` within your order.

    See [authorize a payment and capture funds later](/docs/checkout/standard/customize/authorization/).

* `purchase_units`: **Required**. An array of purchase units. Each purchase unit establishes a contract between a payer and the payee. Each purchase unit represents either a full or partial order that the payer intends to purchase from the payee. See [purchase unit request object definition](/api/orders/v2/definitions/purchase_unit_request) for additional information.

* `payment_source`: Optionally define the `payment_source` when creating the order. This payment source can be `paypal`, a vault `token`, `card` information for PCI-compliant merchants, or alternative payment methods such as `blik` and `apple_pay`. For more information, see [Orders v2 API](/api/orders/v2/orders-create) and [payment\_source](/api/orders/v2/definitions/payment_source).

### createSubscription [#createsubscription]

Provides a simplified and secure subscription experience. PayPal presents payment types to your buyers automatically, making it easier for them to complete their purchase using methods such as Pay with Venmo, PayPal Credit, and credit card payments without reintegration as they are made available.

Pass `vault=true` and `intent=subscription` in the JavaScript SDK to set up a subscription, rather than a one-time transaction.

#### Vanilla JS

```javascript lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons&vault=true&intent=subscription"></script>
```

#### React (JS)

```javascript lineNumbers
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
    vault: true,
    intent: "subscription",
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalScriptProvider, ReactPayPalScriptOptions } from '@paypal/react-paypal-js';

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
        vault: true,
        intent: "subscription",
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
              <PayPalButtons />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
    vault: true,
    intent: "subscription",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal.Buttons().render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

Finally, implement the `createSubscription` function that's called when the buyer selects the PayPal button.

#### Actions [#actions]

* `create`: Creates a subscription for your plan and includes the plan ID, subscriber details, shipping, and other details. The `plan_id` needs to belong to the `client-id` configured on the script.

  `actions.subscription.create` options: See the [create subscription](/docs/api/subscriptions/v1/#subscriptions_create) endpoint for supported options defined in the request body. Also see [create a payment button for the subscription](/docs/subscriptions/integrate/#3-create-payment-button) for more examples.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    createSubscription(data, actions) {
      return actions.subscription.create({
        plan_id: "YOUR_PLAN_ID",
      });
    },

    onApprove(data) {
      alert(
        `You have successfully created subscription ${data.subscriptionID}`,
      );
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
    vault: true,
    intent: "subscription",
  };

  const createSubscription = (data, actions) => {
    return actions.subscription.create({
      plan_id: "YOUR_PLAN_ID",
    });
  };

  const onApprove = (data) => {
    alert(`You have successfully subscribed to ${data.subscriptionID}`); // Optional message given to subscriber
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons
          createSubscription={createSubscription}
          onApprove={onApprove}
        />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { PayPalButtons, PayPalButtonsComponentProps, PayPalScriptProvider, ReactPayPalScriptOptions } from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
        vault: true,
        intent: "subscription"
    };

    const createSubscription: PayPalButtonsComponentProps["createSubscription"] = (data, actions) => {
        return actions.subscription.create({
            "plan_id": "YOUR_PLAN_ID"
          });
    }

    const onApprove: PayPalButtonsComponentProps["onApprove"] = async (data) => {
        alert(`You have successfully subscribed to ${data.subscriptionID}`); // Optional message given to subscriber
    }

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons
                    createSubscription={createSubscription}
                    onApprove={onApprove}
                />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
    vault: true,
    intent: "subscription",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        createSubscription(data, actions) {
          return actions.subscription.create({
            plan_id: "YOUR_PLAN_ID",
          });
        },
        onApprove(data) {
          alert(`You have successfully subscribed to ${data.subscriptionID}`); // Optional message given to subscriber
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

* `revise`: Updates the subscription which could be in `ACTIVE` or `SUSPENDED` status. See [upgrade or downgrade a subscription](/docs/subscriptions/customize/revise-subscriptions/) to make a revision using the Subscriptions API.

### onApprove [#onapprove]

Captures the funds from the transaction and shows a message that tells the buyer the payment was successful. The method is called after the buyer approves the transaction on the `paypal.com` website.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    async createOrder() {
      const response = await fetch("/my-server/create-paypal-order", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          cart: [
            {
              sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
              quantity: "YOUR_PRODUCT_QUANTITY",
            },
          ],
        }),
      });

      const data = await response.json();

      return data.id;
    },
    async onApprove(data) {
      // Capture the funds from the transaction.
      const response = await fetch("/my-server/capture-paypal-order", {
        method: "POST",
        body: JSON.stringify({
          orderID: data.orderID,
        }),
      });

      const details = await response.json();

      // Show success message to buyer
      alert(`Transaction completed by ${details.payer.name.given_name}`);
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "MY_CLIENT_ID",
  };

  const createOrder = async () => {
    const response = await fetch("/my-server/create-paypal-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        cart: [
          {
            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
            quantity: "YOUR_PRODUCT_QUANTITY",
          },
        ],
      }),
    });

    const data = await response.json();

    return data.id;
  };

  const onApprove = async (data) => {
    // Capture the funds from the transaction.
    const response = await fetch("/my-server/capture-paypal-order", {
      method: "POST",
      body: JSON.stringify({
        orderID: data.orderID,
      }),
    });

    const details = await response.json();

    // Show success message to buyer
    alert(`Transaction completed by ${details.payer.name.given_name}`);
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons createOrder={createOrder} onApprove={onApprove} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const createOrder: PayPalButtonsComponentProps["createOrder"] = async () => {
        const response = await fetch("/my-server/create-paypal-order", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                cart: [
                    {
                        sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                        quantity: "YOUR_PRODUCT_QUANTITY",
                    },
                ],
            }),
        });

        const data = await response.json();

        return data.id;
    };

    const onApprove: PayPalButtonsComponentProps["onApprove"] = async (data) => {
        // Capture the funds from the transaction.
        const response = await fetch("/my-server/capture-paypal-order", {
            method: "POST",
            body: JSON.stringify({
                orderID: data.orderID,
            }),
        });

        const details = await response.json();

        // Show success message to buyer
        alert(`Transaction completed by ${details.payer.name.given_name}`);
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons createOrder={createOrder} onApprove={onApprove} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        async createOrder() {
          const response = await fetch("/my-server/create-paypal-order", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              cart: [
                {
                  sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                  quantity: "YOUR_PRODUCT_QUANTITY",
                },
              ],
            }),
          });

          const data = await response.json();

          return data.id;
        },
        async onApprove(data) {
          // Capture the funds from the transaction.
          const response = await fetch("/my-server/capture-paypal-order", {
            method: "POST",
            body: JSON.stringify({
              orderID: data.orderID,
            }),
          });

          const details = await response.json();

          // Show success message to buyer
          alert(`Transaction completed by ${details.payer.name.given_name}`);
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

For the list of order details you receive from `/my-server/capture-paypal-order`, see [capture payment for order](/docs/api/orders/v2/#orders_capture) in the Orders API reference.

### onCancel [#oncancel]

When a buyer cancels a payment, they typically return to the parent page. You can instead use the `onCancel` function to show a cancellation page or return to the shopping cart.

#### Data attributes [#data-attributes]

`orderID`: The ID of the order.

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    onCancel(data) {
      // Show a cancel page, or return to cart
      window.location.assign("/your-cancel-page");
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "MY_CLIENT_ID",
  };

  const onCancel = (data) => {
    // Show a cancel page, or return to cart
    window.location.assign("/your-cancel-page");
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onCancel={onCancel} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onCancel: PayPalButtonsComponentProps["onCancel"] = (data) => {
        // Show a cancel page, or return to cart
        window.location.assign("/your-cancel-page");
    }

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onCancel={onCancel} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        onCancel(data) {
          // Show a cancel page, or return to cart
          window.location.assign("/your-cancel-page");
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### onError [#onerror]

If an error prevents buyer checkout, alert the user that an error has occurred with the buttons using the `onError` callback:

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    onError(err) {
      // For example, redirect to a specific error page
      window.location.assign("/your-error-page-here");
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "MY_CLIENT_ID",
  };

  const onError = (err) => {
    // For example, redirect to a specific error page
    window.location.assign("/your-error-page-here");
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onError={onError} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onError: PayPalButtonsComponentProps["onError"] = (err) => {
        // For example, redirect to a specific error page
        window.location.assign("/your-error-page-here");
    }

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onError={onError} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        onError(error) {
          // For example, redirect to a specific error page
          window.location.assign("/your-error-page-here");
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

> **Note:** This error handler is a catch-all. Errors at this point aren't expected to be
> handled beyond showing a generic error message or page.

### onInit/onClick [#oninitonclick]

Called when the button first renders. You can use it for validations on your page if you are unable to do so prior to rendering. For example, enable buttons when form validation passes or disable if it fails.

#### Data attributes [#data-attributes-1]

`fundingSource`: The funding source of the button that was selected. See the funding sources in the [standalone buttons](/platforms/checkout/standard/customize/standalone-buttons/) guide.

#### Vanilla JS

```javascript lineNumbers

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <p id="error" class="hidden">Click the checkbox</p>
        <label><input id="check" type="checkbox" required /> Click here to continue</label>

        <div id="paypal-button-container"></div>

        <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons"></script>

        <script>
            paypal.Buttons({
                // onInit is called when the button first renders
                onInit(data, actions) {
                    // Disable the buttons
                    actions.disable();

                    // Listen for changes to the checkbox
                    document.querySelector("#check").addEventListener("change", function (event) {
                        // Enable or disable the button when it is checked or unchecked
                        if (event.target.checked) {
                            actions.enable();
                        } else {
                            actions.disable();
                        }
                    });
                },

                // onClick is called when the button is selected
                onClick() {
                    // Show a validation error if the checkbox isn't checked
                    if (!document.querySelector("#check").checked) {
                        document.querySelector("#error").classList.remove("hidden");
                    }
                },
            }).render("#paypal-button-container");
        </script>
    </body>
</html>

```

#### React (JS)

```javascript lineNumbers
import { useState } from "react";
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const [showError, setShowError] = useState(false);
  const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);

  const checkboxChangeHandler = () => {
    setIsCheckboxChecked(!isCheckboxChecked);
  };

  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  // onInit is called when the buttons first render
  const onInit = (data, actions) => {
    /**
     * NOTE: With react-paypal-js, use the disabled prop in the
     * PayPalButtons component instead of actions.disable()
     */
  };

  // onClick is called when a button is selected
  const onClick = () => {
    //  Show a validation error if the checkbox isn't checked
    if (!isCheckboxChecked) setShowError(true);
  };

  return (
    <div className="App">
      {showError && <p>Click the checkbox</p>}
      <label>
        <input type="checkbox" onChange={checkboxChangeHandler} />
        Click here to continue
      </label>

      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons
          onInit={onInit}
          onClick={onClick}
          disabled={!isCheckboxChecked}
        />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import { useState } from "react";
import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const [showError, setShowError] = useState(false);
    const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);

    const checkboxChangeHandler = () => {
        setIsCheckboxChecked(!isCheckboxChecked);
    };

    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    // onInit is called when the buttons first render
    const onInit: PayPalButtonsComponentProps["onInit"] = (data, actions) => {
        /**
         * NOTE: With react-paypal-js, use the disabled prop in the
         * PayPalButtons component instead of actions.disable()
         */
    };

    // onClick is called when a button is selected
    const onClick: PayPalButtonsComponentProps["onClick"] = () => {
        //  Show a validation error if the checkbox isn't checked
        if (!isCheckboxChecked) setShowError(true);
    };

    return (
        <div className="App">
            {showError && <p>Click the checkbox</p>}
            <label>
                <input type="checkbox" onChange={checkboxChangeHandler} />
                Click here to continue
            </label>

            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onInit={onInit} onClick={onClick} disabled={!isCheckboxChecked} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;
const checkbox = document.querySelector("#check");
const errorMessage = document.querySelector("#error");

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        // onInit is called when the buttons first render
        onInit(data, actions) {
          // Disable the buttons
          actions.disable();

          // Listen for changes to the checkbox
          checkbox.addEventListener("change", function (event) {
            // Enable or disable the button when it is checked or unchecked
            if (event.target.checked) {
              actions.enable();
            } else {
              actions.disable();
            }
          });
        },

        // onClick is called when a button is selected
        onClick() {
          // Show a validation error if the checkbox isn't checked
          if (!checkbox.checked) {
            errorMessage.classList.remove("hidden");
          }
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

For cases when you need asynchronous validation, see [asynchronous validation](/docs/checkout/standard/customize/validate-user-input/#asynchronous-validation).

### paypal.Buttons().isEligible [#paypalbuttonsiseligible]

Commonly used for [standalone buttons](/platforms/checkout/standard/customize/standalone-buttons/) when you need to check if the funding source is eligible.

#### Vanilla JS

```javascript lineNumbers
// Loop over each funding source / payment method
paypal.getFundingSources().forEach(function (fundingSource) {
  // Initialize the buttons
  const button = paypal.Buttons({
    fundingSource: fundingSource,
  });

  // Check if the button is eligible
  if (button.isEligible()) {
    // Render the standalone button for that funding source
    button.render("#paypal-button-container");
  }
});
```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;
try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    // Loop over each funding source / payment method
    paypal.getFundingSources().forEach(function (fundingSource) {
      // Initialize the buttons
      const button = paypal.Buttons({
        fundingSource: fundingSource,
      });

      // Check if the button is eligible
      if (button.isEligible()) {
        // Render the standalone button for that funding source
        button.render("#paypal-button-container");
      }
    });
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### paypal.Buttons().render( container ) [#paypalbuttonsrender-container-]

Renders the buttons in the defined container selector.

#### Vanilla JS

```javascript lineNumbers
paypal.Buttons().render("#paypal-buttons-container");
```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;
try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal.Buttons().render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### onShippingChange [#onshippingchange]

**Deprecated**. See [`onShippingAddressChange`](#on-shipping-address-change) and [`onShippingOptionsChange`](#on-shipping-options-change).

While the buyer is on the PayPal site, you can update their shopping cart to reflect the shipping address they selected on PayPal. You can use the callback to:

* Validate that you support the shipping address.
* Update shipping costs.
* Change the line items in the cart.
* Inform the buyer that you don't support their shipping address.

> **Note:** **Availability:** The `onShippingChange` function isn't compatible with
> Subscriptions.

#### Data attributes [#data-attributes-2]

`data`: An object containing the buyer’s shipping address. Consists of the following fields:

* `orderID` (required): An ID that represents an order.
* `paymentID` (optional): An ID that represents a payment.
* `paymentToken` (required): An ID or token that represents the resource.
* `shipping_address` (required): The buyer's selected city, state, country, and postal code.
  * `city`: Shipping address city.
  * `state`: Shipping address state or province.
  * `country_code`: Shipping address country.
  * `postal_code`: Shipping address ZIP code or postal code.
* `selected_shipping_option` (optional): Shipping option selected by the buyer.
  * `label`: Custom shipping method label.
  * `type`: Shipping method type (`SHIPPING` or `PICKUP`).
  * `amount`: Additional cost for this method.
    * `currency_code`: ISO currency code, such as `USD`.
    * `value`: String-formatted decimal format, such as `1.00`.

#### Actions [#actions-1]

`actions`: An object containing methods to update the contents of the buyer’s cart and interact with PayPal Checkout. Consists of the following methods:

* `resolve`: Indicates to PayPal that you don't need to make any changes to the buyer’s cart.
* `reject`: Indicates to PayPal that you won't support the shipping address provided by the buyer.
* `order`: Client-side order API method.
  * `PATCH`: To make the update, pass an array of change operations in the request, as described in the [order update](/docs/api/orders/v2/) API reference. The response returns a promise.

#### Examples [#examples]

1. This example shows not supporting international transactions:

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    onShippingChange(data, actions) {
      if (data.shipping_address.country_code !== "US") {
        return actions.reject();
      }

      return actions.resolve();
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const onShippingChange = (data, actions) => {
    if (data.shipping_address.country_code !== "US") {
      return actions.reject();
    }

    return actions.resolve();
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onShippingChange={onShippingChange} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onShippingChange: PayPalButtonsComponentProps["onShippingChange"] = (data, actions) => {
        if (data.shipping_address?.country_code !== "US") {
            return actions.reject();
        }

        return actions.resolve();
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onShippingChange={onShippingChange} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        onShippingChange(data, actions) {
          if (data.shipping_address.country_code !== "US") {
            return actions.reject();
          }

          return actions.resolve();
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

2. This example shows a more complex situation in which a state has free shipping, but flat-rate shipping is the standard for the rest of the US:

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    async onShippingChange(data, actions) {
      // Reject non-US addresses
      if (data.shipping_address.country_code !== "US") {
        return actions.reject();
      }

      // Patch the shipping amount
      const response = await fetch("/my-server/patch-paypal-order", {
        method: "PATCH",
        body: JSON.stringify({
          shippingAddress: data.shipping_address,
        }),
      });
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const onShippingChange = async (data, actions) => {
    // Reject non-US addresses
    if (data.shipping_address.country_code !== "US") {
      return actions.reject();
    }

    // Patch the shipping amount
    const response = await fetch("/my-server/patch-paypal-order", {
      method: "PATCH",
      body: JSON.stringify({
        shippingAddress: data.shipping_address,
      }),
    });
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onShippingChange={onShippingChange} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onShippingChange: PayPalButtonsComponentProps["onShippingChange"] = async (data, actions) => {
        // Reject non-US addresses
        if (data.shipping_address?.country_code !== 'US') {
            return actions.reject();
        }

        // Patch the shipping amount
        const response = await fetch("/my-server/patch-paypal-order", {
            method: "PATCH",
            body: JSON.stringify(
            {
                shippingAddress: data.shipping_address
            })
        })
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onShippingChange={onShippingChange} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        async onShippingChange(data, actions) {
          // Reject non-US addresses
          if (data.shipping_address.country_code !== "US") {
            return actions.reject();
          }

          // Patch the shipping amount
          const response = await fetch("/my-server/patch-paypal-order", {
            method: "PATCH",
            body: JSON.stringify({
              shippingAddress: data.shipping_address,
            }),
          });
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### onShippingAddressChange [#onshippingaddresschange]

While the buyer is on the PayPal site, you can update their shopping cart to reflect the shipping address they selected on PayPal. You can use the callback to:

* Validate that you support the shipping address.
* Update shipping costs.
* Change the line items in the cart.
* Inform the buyer that you don't support their shipping address.

> **Note:** **Availability:** The `onShippingAddressChange` function isn't compatible with
> Subscriptions.

#### Data attributes [#data-attributes-3]

`data`: An object containing the buyer’s shipping address. Consists of the following properties:

* `errors`: Errors to show to the user.
  * `ADDRESS_ERROR`: "Your order can't be shipped to this address."
  * `COUNTRY_ERROR`: "Your order can't be shipped to this country."
  * `STATE_ERROR`: "Your order can't be shipped to this state."
  * `ZIP_ERROR`: "Your order can't be shipped to this zip."
* `orderID`: An ID that represents an order.
* `paymentID`: An ID that represents a payment.
* `paymentToken`: An ID or token that represents a resource.
* `shippingAddress`: The buyer's selected city, state, country, and postal code.
  * `city`: Shipping address city.
  * `countryCode`: Shipping address country.
  * `postalCode`: Shipping address ZIP code or postal code.
  * `state`: Shipping address state or province.

#### Actions [#actions-2]

`actions`: An object containing a method to interact with PayPal Checkout. Consists of the following property:

```javascript lineNumbers
* `reject`: Indicates to PayPal that you won't support the shipping address provided by the buyer.
```

#### Examples [#link-examples]

1. This example shows how to reject international transactions using `actions.reject()`:

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    onShippingAddressChange(data, actions) {
      if (data.shippingAddress.countryCode !== "US") {
        return actions.reject(data.errors.COUNTRY_ERROR);
      }
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const onShippingAddressChange = (data, actions) => {
    if (data.shippingAddress.countryCode !== "US") {
      return actions.reject(data.errors.COUNTRY_ERROR);
    }
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onShippingAddressChange={onShippingAddressChange} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onShippingAddressChange: PayPalButtonsComponentProps["onShippingAddressChange"] = (data, actions) => {
        if (data.shippingAddress.countryCode !== "US") {
              return actions.reject(data.errors?.COUNTRY_ERROR);
        }
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onShippingAddressChange={onShippingAddressChange} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        onShippingAddressChange(data, actions) {
          if (data.shippingAddress.countryCode !== "US") {
            return actions.reject(data.errors.COUNTRY_ERROR);
          }
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

### onShippingOptionsChange [#onshippingoptionschange]

This callback is triggered any time the user selects a new shipping option. You can use the callback to:

* Validate that you support the shipping method.
* Update shipping costs.
* Change the line items in the cart.
* Inform the buyer that you don't support their shipping method.

> **Note:** **Availability:** The `onShippingOptionsChange` function isn't compatible with
> Subscriptions.

#### Data attributes [#data-attributes-4]

`data`: An object containing the payer’s selected shipping option. Consists of the following properties:

* `errors`: Errors to show to the payer.
  * `METHOD_UNAVAILABLE`: "The shipping method you selected is unavailable. To continue, choose another way to get your order."
  * `STORE_UNAVAILABLE`: "Part of your order isn't available at this store."
* `orderID`: An ID that represents an order.
* `paymentID`: An ID that represents a payment.
* `paymentToken`: An ID or token that represents a resource.
* `selectedShippingOption`: Shipping option selected by the payer.
  * `id`: Custom shipping method ID.
  * `label`: Custom shipping method label.
  * `selected`: Set to `true` by PayPal when selected by the buyer.
  * `type`: Shipping method type (`SHIPPING` or `PICKUP`).
  * `amount`: Additional cost for this method.
    * `currencyCode`: ISO currency code, such as `USD`.
    * `value`: String-formatted decimal format, such as `1.00`.

#### Actions [#actions-3]

`actions`: An object containing a method to interact with PayPal Checkout. Consists of the following property:

```javascript lineNumbers
* `reject`: Indicates to PayPal that you won't support the shipping method selected by the buyer.
```

#### Customize shipping options [#customize-shipping-options]

Add support for [multiple shipping options](/platforms/checkout/standard/customize/shipping-options/) when buyers make changes to their shipping information.

#### Examples [#examples-1]

1. This example shows how to disable store pickup using `actions.reject()`:

#### Vanilla JS

```javascript lineNumbers
paypal
  .Buttons({
    onShippingOptionsChange(data, actions) {
      if (data.selectedShippingOption.type === "PICKUP") {
        return actions.reject(data.errors.STORE_UNAVAILABLE);
      }
    },
  })
  .render("#paypal-button-container");
```

#### React (JS)

```javascript lineNumbers
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";

export default function App() {
  const initialOptions = {
    clientId: "YOUR_CLIENT_ID",
  };

  const onShippingOptionsChange = (data, actions) => {
    if (data.selectedShippingOption.type === "PICKUP") {
      return actions.reject(data.errors.STORE_UNAVAILABLE);
    }
  };

  return (
    <div className="App">
      <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons onShippingOptionsChange={onShippingOptionsChange} />
      </PayPalScriptProvider>
    </div>
  );
}
```

#### React (TS)

```javascript lineNumbers

import {
    PayPalButtons,
    PayPalButtonsComponentProps,
    PayPalScriptProvider,
    ReactPayPalScriptOptions,
} from "@paypal/react-paypal-js";

export default function App() {
    const initialOptions: ReactPayPalScriptOptions = {
        clientId: "YOUR_CLIENT_ID",
    };

    const onShippingOptionsChange: PayPalButtonsComponentProps["onShippingOptionsChange"] = (data, actions) => {
        if (data.selectedShippingOption.type === 'PICKUP') {
            return actions.reject(data.errors?.STORE_UNAVAILABLE);
        }
    };

    return (
        <div className="App">
            <PayPalScriptProvider options={initialOptions}>
                <PayPalButtons onShippingOptionsChange={onShippingOptionsChange} />
            </PayPalScriptProvider>
        </div>
    );
}

```

#### ES Module

```javascript lineNumbers
import { loadScript } from "@paypal/paypal-js";

let paypal;

try {
  paypal = await loadScript({
    clientId: "YOUR_CLIENT_ID",
  });
} catch (error) {
  console.error("failed to load the PayPal JS SDK script", error);
}

if (paypal) {
  try {
    await paypal
      .Buttons({
        onShippingOptionsChange(data, actions) {
          if (data.selectedShippingOption.type === "PICKUP") {
            return actions.reject(data.errors?.STORE_UNAVAILABLE);
          }
        },
      })
      .render("#paypal-button-container");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}
```

## Marks [#marks]

Use marks when the PayPal buttons are presented alongside other funding sources on the page and the PayPal buttons are shown when the buyer selects a radio button. See [Display other payment methods](/docs/checkout/standard/customize/display-payment-methods/).

```javascript lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,marks"></script>
```

### paypal.Marks(options) [#paypalmarksoptions]

* [`paypal.Marks().isEligible`](#paypal-marks-iseligible)
* [`paypal.Marks().render( container )`](#link-paypalmarksrendercontainer)

#### paypal.Marks().isEligible [#paypalmarksiseligible]

```javascript lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,funding-eligibility,marks"></script>
```

Commonly used for [standalone buttons](/platforms/checkout/standard/customize/standalone-buttons/) when you need to check if the funding source is eligible.

```javascript lineNumbers
// Loop over each funding source / payment method
paypal.getFundingSources().forEach(function (fundingSource) {
  // Initialize the marks
  var mark = paypal.Marks({
    fundingSource: fundingSource,
  });

  // Check if the mark is eligible
  if (mark.isEligible()) {
    // Render the standalone mark for that funding source
    mark.render("#paypal-mark-container");
  }
});
```

#### paypal.Marks().render( container ) [#paypalmarksrender-container-]

Renders the radio buttons that are passed in container selector.

```javascript lineNumbers
paypal.Marks().render("#paypal-marks-container");
```

```javascript lineNumbers
<!-- Render the radio buttons and marks -->
<label>
  <input type="radio" name="payment-option" value="paypal" checked>
  <div id="paypal-marks-container"></div>
</label>

<label>
  <input type="radio" name="payment-option" value="alternate">
</label>

<div id="paypal-buttons-container"></div>
<div id="alternate-button-container">
  <button>Pay with a different method</button>
</div>

<script>
  // Render the PayPal marks
  paypal.Marks().render('#paypal-marks-container');

  // Render the PayPal buttons
  paypal.Buttons().render('#paypal-buttons-container');

  // Listen for changes to the radio buttons
  document.querySelectorAll('input[name=payment-option]')
    .forEach(function (el) {
      el.addEventListener('change', function (event) {

        // If PayPal is selected, show the PayPal button
        if (event.target.value === 'paypal') {
          document.body.querySelector('#alternate-button-container')
            .style.display = 'none';
          document.body.querySelector('#paypal-buttons-container')
            .style.display = 'block';
        }

        // If alternate funding is selected, show a different button
        if (event.target.value === 'alternate') {
          document.body.querySelector('#alternate-button-container')
            .style.display = 'block';
          document.body.querySelector('#paypal-buttons-container')
            .style.display = 'none';
        }
      });
    });

  // Hide non-PayPal button by default
  document.body.querySelector('#alternate-button-container')
    .style.display = 'none';
</script>
```

## Card fields [#card-fields]

Use PayPal-hosted card fields to accept and save credit and debit cards without handling card information. PayPal handles all security and compliance issues associated with processing cards.

### Request: Initialize cardFields [#request-initialize-cardfields]

Initialize the card fields component by creating an instance of `paypal.CardFields`:

```javascript lineNumbers
const cardFields = paypal.CardFields({
  style,
  createOrder,
  onApprove,
});
```

#### Options [#options]

You can pass the following options when instantiating the card fields component:

| Option                         | Description                                        | Required |
| ------------------------------ | -------------------------------------------------- | -------- |
| [`createOrder`](#create-order) | The callback to create the order on your server.   | Yes      |
| [`onApprove`](#on-approve)     | The callback to capture the order on your server.  | Yes      |
| [`onError`](#link-onerror)     | The callback to catch errors during checkout.      | Yes      |
| [`inputEvents`](#input-events) | An object containing callbacks for an input event. | No       |
| `style`                        | A custom style object.                             | No       |

#### createOrder [#createorder-2]

Creates an order ID for any case involving a purchase. This callback is called whenever the payer submits card fields.

#### Request: Create order from server [#request-create-order-from-server]

```javascript lineNumbers
const createOrder = (data, actions) => {
  return fetch("/api/paypal/order", {
    method: "POST",
  })
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      return json.orderID;
    });
};
```

Set up your server to call the [Create Order API](/docs/api/orders/v2/#orders_create). The button pressed on the client side determines the payment source sent. In the following sample, the payer opted to send their card as a payment source.

#### Request: Create order with a card as the payment source [#request-create-order-with-a-card-as-the-payment-source]

```bash lineNumbers
curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \n -H "Content-Type: application/json" \n -H "Authorization: Bearer ACCESS-TOKEN" \n -d '{
    "intent": "CAPTURE",
    "purchase_units": [
        {
            "amount": {
                "currency_code": "USD",
                "value": "100.00"
            }
        }
    ],
}
```

#### Response [#response]

Pass the `order.id` to the JavaScript SDK to update the order with the number, CVV, and expiration date entered.

**Javascript**

```javascript lineNumbers

  {
      "id": "5O190127TN364715T",
      "status": "CREATED",
      "intent": "CAPTURE",
      "purchase_units": [
          {
              "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
              "amount": {
                  "currency_code": "USD",
                  "value": "100.00"
              }
          }
      ],
      "create_time": "2022-10-03T11:18:49Z",
      "links": [
          {
              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
              "rel": "self",
              "method": "GET"
          },
          {
              "href": "https://www.paypal.com/checkoutnow?token=5O190127TN364715T",
              "rel": "approve",
              "method": "GET"
          },
          {
              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
              "rel": "update",
              "method": "PATCH"
          },
          {
              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T/capture",
              "rel": "capture",
              "method": "POST"
          }
      ]
  }

```

#### onApprove [#onapprove-1]

Signals that a payer approved a purchase by submitting a card or selecting a button.

#### Request: Capture order from server [#request-capture-order-from-server]

Set up your server to call the [Capture Order API](/docs/api/orders/v2/#orders_capture), then run the following script to capture an order from your server:

```javascript lineNumbers
const onApprove = (data, actions) => {
  return fetch("/api/paypal/order/capture", {
    method: "POST",
    body: JSON.stringify({
      orderID: data.orderID,
    }),
  })
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      // Show a success page
    });
};
```

#### Request [#link-request]

```javascript lineNumbers

curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/<order_id>/capture
 -H "Content-Type: application/json"
 -H "Authorization: Bearer ACCESS-TOKEN"
```

#### Response [#link-response]

```javascript lineNumbers

{
  "id": "some_id",
  "status": "COMPLETED",
  "payment_source": {
    "card": {
      "brand": "VISA",
      "last_digits": "1111",
      "type": "CREDIT"
    }
  },
  "purchase_units": [
    {
      "reference_id": "reference_id",
      "payments": {
        "authorizations": [
          {
            "id": "id",
            "status": "CREATED",
            "amount": {
              "currency_code": "USD",
              "value": "100.00"
            },
            "seller_protection": {
              "status": "ELIGIBLE",
              "dispute_categories": [
                "ITEM_NOT_RECEIVED",
                "UNAUTHORIZED_TRANSACTION"
              ]
            },
            "expiration_time": "2022-10-04T14:37:39Z",
            "links": [
              {
                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T",
                "rel": "self",
                "method": "GET"
              },
              {
                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T/capture",
                "rel": "capture",
                "method": "POST"
              },
              {
                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T/void",
                "rel": "void",
                "method": "POST"
              },
              {
                "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
                "rel": "up",
                "method": "GET"
              }
            ]
          }
        ]
      }
    }
  ],
  "payer": {
    "name": {
      "given_name": "Firstname",
      "surname": "Lastname"
    },
    "email_address": "payer@example.com",
    "payer_id": "QYR5Z8XDVJNXQ"
  },
  "links": [
    {
      "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
      "rel": "self",
      "method": "GET"
    }
  ]
}

```

#### onError [#link-onerror]

Handles any errors that occur while the payer submits the form.

```javascript lineNumbers
const cardFields = paypal.CardFields({
    // ...
    onError: (error) => {
        // Handle the error object
        console.error(error);
    },
    // ...
});
```

#### onCancel [#link-oncancel]

For 3D Secure usecases, you can choose what to present to the customer if they close the verification modal. This will also mean the transaction was cancelled.

```javascript lineNumbers

const cardFields = paypal.CardFields({
    // ...
    onCancel: () => {
        console.log("Your order was cancelled due to incomplete verification");
    },
    // ...
});

```

### Card field properties [#card-field-properties]

The following card field properties are used to capture a payment. Use the `render()` method to render these instances to the DOM.

| Property      | Type     | Field created                        | Required |
| ------------- | -------- | ------------------------------------ | -------- |
| `CVVField`    | Function | Card CVV or CID, a 3 or 4-digit code | Yes      |
| `ExpiryField` | Function | Card expiration date                 | Yes      |
| `NameField`   | Function | Name for the card                    | No       |
| `NumberField` | Function | Card number                          | Yes      |

#### Card field options [#card-field-options]

Customize event callbacks or the style of each field with the following options:

| Property      | Type               | Description                                                                                       | Required |
| ------------- | ------------------ | ------------------------------------------------------------------------------------------------- | -------- |
| `inputEvents` | Object inputEvents | An object containing callbacks for when a specified input event occurs for a field.               | No       |
| `style`       | Object style guide | Style a field with supported CSS properties.                                                      | No       |
| `placeholder` | String             | Each card field has a default placeholder text. Pass a placeholder object to customize this text. | No       |

#### Example: Card field properties [#example-card-field-properties]

```javascript lineNumbers
const cardNameContainer = document.getElementById("card-name-field-container");
const nameField = cardField.NameField({
  placeholder: "Enter your full name as it appears on your card",
  inputEvents: {
    onChange: (event) => {
      console.log("returns a stateObject", event);
    },
  },
  style: {
    ".invalid": {
      color: "purple",
    },
  },
});

nameField.render(cardNameContainer);
const cardNumberContainer = document.getElementById(
  "card-number-field-container",
);
const numberField = cardField.NumberField(/*options*/);
numberField.render(cardNumberContainer);
const cardExpiryContainer = document.getElementById(
  "card-expiry-field-container",
);
const expiryField = cardField.ExpiryField(/*options*/);
expiryField.render(cardExpiryContainer);
const cardCvvContainer = document.getElementById("card-cvv-field-container");
const cvvField = cardField.CVVField(/*options*/);
cvvField.render(cardCvvContainer);
```

### Style card fields [#style-card-fields]

Change the layout, width, height, and outer styling of the card fields. Modify the elements you supply as containers with your current stylesheets. For example, `input: { border: 1px solid #333; }`.

#### Supported CSS properties [#supported-css-properties]

The CSS properties listed are the only properties supported in the advanced credit and debit card payments configuration. If you specify an unsupported CSS property, a warning is logged to the browser console.

* `appearance`
* `color`
* `direction`
* `font`
* `font-family`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-weight`
* `letter-spacing`
* `line-height`
* `opacity`
* `outline`
* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`
* `text-shadow`
* `transition`
* `-moz-appearance`
* `-moz-osx-font-smoothing`
* `-moz-tap-highlight-color`
* `-moz-transition`
* `-webkit-appearance`
* `-webkit-osx-font-smoothing`
* `-webkit-tap-highlight-color`
* `-webkit-transition`

### Style parent fields [#style-parent-fields]

Pass a style object to the parent `cardField` component to apply the object to every field.

```javascript lineNumbers
const cardStyle = {
  input: {
    "font-size": "16px",
    "font-family": "courier, monospace",
    "font-weight": "lighter",
    color: "#ccc",
  },
  ".invalid": {
    color: "purple",
  },
};
const cardField = paypal.CardFields({
  style: cardStyle,
});
```

#### Style individual fields [#style-individual-fields]

Pass a `style` object to an individual card field to apply the object to that field only. This overrides any object passed through a parent component.

```javascript lineNumbers

const nameFieldStyle = {
    'input': {
        'color': 'blue'
    }
    '.invalid': {
        'color': 'purple'
    },
};
const nameField = cardField.NameField({
    style: nameFieldStyle
}).render('#card-name-field-container');

```

### inputEvents [#inputevents]

You can pass an `inputEvents` object into a parent `cardField` component or each card field individually.

Pass an `inputEvents` object to the parent `cardField` component to apply the object to every field.

Pass an `inputEvents` object to an individual card field to apply the object to that field only. This overrides any object passed through a parent component.

#### Supported input event callbacks [#supported-input-event-callbacks]

You can pass the following callbacks to the `inputEvents` object:

| Event Name             | Description                                 |
| ---------------------- | ------------------------------------------- |
| `onChange`             | Called when the input in any field changes. |
| `onFocus`              | Called when any field gets focus.           |
| `onBlur`               | Called when any field loses focus.          |
| `onInputSubmitRequest` | Called when a payer submits the field.      |

#### Example: inputEvents into parent component [#example-inputevents-into-parent-component]

Pass the `inputEvents` object into the parent `CardFields` component.

```javascript lineNumbers
const cardField = paypal.CardFields({
    inputEvents: {
        onChange: (data) => {
            // Do something when an input changes
        },
        onFocus: (data) => {
            // Do something when a field gets focus
        },
        onBlur: (data) => {
            // Do something when a field loses focus
        },
        onInputSubmitRequest: (data) => {
            if (data.isFormValid) {
                // Submit the card form for the payer
            } else {
                // Inform payer that some fields aren't valid
            }
        },
    }
})
```

#### Example: inputEvents into individual component [#link-exampleinputeventsintoindividualcomponent]

Pass the `inputEvents` object into each individual field component:

```javascript lineNumbers

const cardField = paypal.CardFields(/* options */)
const nameField = cardField.NameField({
       inputEvents: {
        onChange: (data) => {
            // Do something when the input of only the name field changes
        },
        onFocus: (data) => {
            // Do something when only the name field gets focus
        },
        onBlur: (data) => {
            // Do something when only name field loses focus
        },
        onInputSubmitRequest: (data) => {
            if (data.isFormValid) {
                // Submit the card form for the payer
            } else {
                // Inform payer that some fields aren't valid
            }
        },
    }
});

```

#### sample-state-object [#sample-state-object]

Each of the event callbacks returns a state object similar to the following example:

```javascript lineNumbers
data: {
    cards: [{code: {name: 'CVV', size: 3}, niceType: "Visa", type: "visa"}]
    emittedBy: "number", // Not returned for getState()
    isFormValid: false,
    errors: ["INVALID_CVV"]
    fields: {
        cardCvvField: {
            isFocused: false,
            isEmpty: true,
            isValid: false,
            isPotentiallyValid: true,
        },
        cardNumberField: {
            isFocused: true,
            isEmpty: false,
            isValid: false,
            isPotentiallyValid: true,
        },
        cardNameField: {
            isFocused: false,
            isEmpty: true,
            isValid: false,
            isPotentiallyValid: true,
        },
        cardExpiryField: {
            isFocused: false,
            isEmpty: true,
            isValid: false,
            isPotentiallyValid: true,
        },
    },
}
```

#### Validate individual fields [#validate-individual-fields]

Validate individual fields when an input event occurs:

```javascript lineNumbers
const cardFields = paypal.CardFields({
  /* options */
});
let cardContainer = document.getElementById("card-number-field-container");
const cardNumberField = cardFields.NumberField({
  // Add valid or invalid class when the validation changes on the field
  inputEvents: {
    onChange: (data) => {
      cardContainer.className = data.fields.cardNumberField.isValid
        ? "valid"
        : "invalid";
    },
  },
});
```

### Validate entire card form [#validate-entire-card-form]

Validate an entire card form when an input event occurs:

```javascript lineNumbers
const formContainer = document.getElementById("form-container");
const cardFields = paypal.CardFields({
  inputEvents: {
    onChange: (data) => {
      formContainer.className = data.isFormValid ? "valid" : "invalid";
    },
  },
});
```

### Methods on parent card fields [#methods-on-parent-card-fields]

The following methods are supported on parent card fields:

* `getState()`
* `isEligible()`
* `submit()`

#### `getState() -> {promise | void}` [#getstate---promise--void]

Returns a promise that resolves into a `stateObject`. Includes the state of all fields, possible card types, and an array of errors.

#### Example [#example]

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
// ...
// Render the card fields
// ...
cardFields.getState().then((data) => {
  // Submit only if the current
  // state of the form is valid
  if (data.isFormValid) {
    cardFields
      .submit()
      .then(() => {
        //Submit success
      })
      .catch((error) => {
        //Submit error
      });
  }
});
```

#### `isEligible() -> {Boolean}` [#iseligible---boolean]

Checks if a `cardField` instance can render based on configuration and business rules.

#### Example [#example-1]

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
if (cardFields.isEligible()) {
  cardFields.NumberField().render("#card-number-field-container");
  cardFields.CVVField().render("#card-cvv-field-container");
  // ...
}
```

### `submit() -> {promise | void}` [#submit---promise--void]

Submits payment information.

```javascript lineNumbers
// Add click listener to merchant-supplied submit button
// and call the submit function on the CardField component
multiCardFieldButton.addEventListener("click", () => {
  cardField
    .submit()
    .then(() => {
      console.log("Card Fields submit");
    })
    .catch((err) => {
      console.log("There was an error with card fields: ", err);
    });
});
```

### Methods on individual card fields [#methods-on-individual-card-fields]

The following methods are supported on individual card fields:

* `addClass()`
* `clear()`
* `focus()`
* `removeAttribute()`
* `removeClass()`
* `render()`
* `setAttribute()`
* `setMessage()`
* `close()`

| Method                                   | Description                                                                                                                                                                                     |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `addClass() -> {promise \| void}`        | Adds a class to a field. Use this method to update field styles when events occur elsewhere during checkout.                                                                                    |
| `clear() -> {void}`                      | Clears the value of the field.                                                                                                                                                                  |
| `focus() -> {void}`                      | Focuses the field.                                                                                                                                                                              |
| `removeAttribute() -> {promise \| void}` | Removes an attribute from a field where called<br />You can remove the following attributes with `removeAttribute`:<br />- aria-invalid<br />- aria-required<br />- disabled<br />- placeholder |
| `removeClass() -> {promise \| void}`     | Pass the class name as a string in `removeClass` to remove a class from a field. Use this method to update field styles when events occur elsewhere in the checkout flow.                       |
| `render() -> {promise \| void}`          | Renders the individual card fields to the DOM for checkout.<br />Pass the HTML element reference or CSS selector string for the input field.                                                    |
| `setAttribute() -> {promise \| void}`    | Sets the supported attributes and values of a field. Pass in attributes and values as strings.                                                                                                  |
| `setMessage() -> {void}`                 | Sets a message on a field for screen readers. Pass the message as a string in `setMessage`.                                                                                                     |

#### addClass()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const numberField = cardField.NumberField(/* options */);
numberField.addClass("purple");
numberField.render(cardNumberContainer);
```

#### clear()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const nameField = cardField.NameField(/* options */);
nameField.render(cardNameContainer);
nameField.clear();
```

#### focus()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const nameField = cardField.NameField(/* options */);
nameField.render(cardNameContainer);
nameField.focus();
```

#### removeAttribute()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const numberField = cardField.NumberField(/* options */);
numberField.render(cardNumberContainer);
numberField.removeAttribute("placeholder");
```

#### removeClass()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const numberField = cardField.NumberField(/* options */);
numberField.render(cardNumberContainer);
numberField.removeClass("purple");
```

#### render()

```javascript lineNumbers
const cardNumberContainer = document.getElementById(
  "card-number-field-container",
);
const cardField = paypal.CardFields(/* options */);
cardField.NumberField(/* options */).render(cardNumberContainer);
// OR use a selector string
cardField.NumberField(/*options*/).render("#card-number-field-container");
```

#### setAttribute()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const nameField = cardField.NameField(/* options */);
nameField.setAttribute("placeholder", "Enter your full name");
nameField.render(cardNameContainer);
```

#### setMessage()

```javascript lineNumbers
const cardField = paypal.CardFields(/* options */);
const nameField = cardField.NameField(/* options */);
nameField.render(cardNameContainer);
nameField.setMessage("Enter your full name");
```

### Type definitions [#type-definitions]

* [`cardSecurityCode`](#cardsecuritycode)
* [`cardType`](#cardtype)
* [`cardFieldData`](#cardfielddata)
* [`stateObject`](#stateobject)

#### cardSecurityCode [#cardsecuritycode]

Information about the security code for a card.

| Property | Type   | Description                                                                       |
| -------- | ------ | --------------------------------------------------------------------------------- |
| `name`   | String | The name of a security code for a card. Valid values are `CVV`, `CID`, and `CVC`. |
| `size`   | Number | The expected length of the security code, typically `3` or `4` digits.            |

#### cardType [#cardtype]

Information about the card type sent in the `cards` array as a part of the [stateObject](#link-stateobject).

| Property   | Type                      | Description                                                                                                                                                          |
| ---------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`     | String                    | The code-readable card type. Valid values are: `american-express``diners-club``discover``jcb``maestro``mastercard``unionpay``visa``elo``hiper`, `hipercard`          |
| `code`     | Object `cardSecurityCode` | Contains data about the card brand's security code requirements. For example, on a Visa card, the CVV is 3 digits. On an American Express card, the CID is 4 digits. |
| `niceType` | String                    | The human-readable card type. Valid values are: `American Express``Diner Club``discover``JCB``Maestro``Mastercard``UnionPay``Visa``Elo``Hiper`,`Hipercard`           |

#### cardFieldData [#cardfielddata]

Field data for card payments is sent for each card field in the [stateObject](#link-stateobject).

| Property             | Type    | Description                                                                                                                                                                                         |
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isFocused`          | Boolean | Shows whether the input field is currently focused.                                                                                                                                                 |
| `isEmpty`            | Boolean | Shows whether the user has entered a value in the input.                                                                                                                                            |
| `isPotentiallyValid` | Boolean | Shows whether the current input can be valid. For example, if a payer enters `41` for the card number, the input can become valid. However, if the payer enters `4x`, the input can't become valid. |
| `isValid`            | Boolean | Shows whether the input is valid and can be submitted.                                                                                                                                              |

#### stateObject [#stateobject]

| Property      | Type                | Description                                                                                                                                                                                                                 |
| ------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cards`       | Array of `cardType` | Returns an array of potential cards. If the card type has been determined, the array contains only 1 card.                                                                                                                  |
| `emittedBy`   | String              | The name of the field associated with an event. `emittedBy` isn't included if returned by `getState`. Valid values are `"name"`,`"number"`, `"cvv"`, and `"expiry"`.                                                        |
| `errors`      | Array               | Array of card fields that are currently not valid. Potential values are `"INELIGIBLE_CARD_VENDOR"`,`"INVALID_NAME"`, `"INVALID_NUMBER"`, `"INVALID_EXPIRY"` or `"INVALID_CVV"`.                                             |
| `isFormValid` | Boolean             | Shows whether the form is valid.                                                                                                                                                                                            |
| `fields`      | Object              | Contains data about the field in the context of the event. Valid values are `"cardNameField"`, `"cardCvvField"`, `"cardNumberField"` and `"cardExpiryField"`. Each of these keys contain an object of type `cardFieldData.` |

### Full example [#full-example]

The following sample shows how a full hosted card fields script might show up in HTML:

```html lineNumbers
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
  </head>
  <body>
    <div id="checkout-form">
      <div id="card-name-field-container"></div>
      <div id="card-number-field-container"></div>
      <div id="card-expiry-field-container"></div>
      <div id="card-cvv-field-container"></div>
      <button id="multi-card-field-button" type="button">
        Pay now with Card Fields
      </button>
    </div>
  </body>
  <script src="https://www.paypal.com/sdk/js?client-id=<your-client-id>&components=card-fields"></script>
  <script>
    // Custom styles object (optional)
    const styleObject = {
      input: {
        "font-size": "16 px",
        "font-family": "monospace",
        "font-weight": "lighter",
        color: "blue",
      },
      ".invalid": {
        color: "purple",
      },
      ":hover": {
        color: "orange",
      },
      ".purple": {
        color: "purple",
      },
    };
    // Create the card fields component and define callbacks
    const cardField = paypal.CardFields({
      style: styleObject,
      createOrder: function (data, actions) {
        return fetch("/api/paypal/order/create/", {
          method: "post",
        })
          .then((res) => {
            return res.json();
          })
          .then((orderData) => {
            return orderData.id;
          });
      },
      onApprove: function (data, actions) {
        const { orderID } = data;
        return fetch("/api/paypal/orders/${orderID}/capture/", {
          method: "post",
        })
          .then((res) => {
            return res.json();
          })
          .then((orderData) => {
            // Redirect to success page
          });
      },
      inputEvents: {
        onChange: function (data) {
          // Handle a change event in any of the fields
        },
        onFocus: function (data) {
          // Handle a focus event in any of the fields
        },
        onBlur: function (data) {
          // Handle a blur event in any of the fields
        },
        onInputSubmitRequest: function (data) {
          // Handle an attempt to submit the entire card form
          // while focusing any of the fields
        },
      },
    });
    // Define the container for each field and the submit button
    const cardNameContainer = document.getElementById(
      "card-name-field-container",
    ); // Optional field
    const cardNumberContainer = document.getElementById(
      "card-number-field-container",
    );
    const cardCvvContainer = document.getElementById(
      "card-cvv-field-container",
    );
    const cardExpiryContainer = document.getElementById(
      "card-expiry-field-container",
    );
    const multiCardFieldButton = document.getElementById(
      "multi-card-field-button",
    );
    // Render each field after checking for eligibility
    if (cardField.isEligible()) {
      const nameField = cardField.NameField();
      nameField.render(cardNameContainer);
      const numberField = cardField.NumberField();
      numberField.render(cardNumberContainer);
      const cvvField = cardField.CVVField();
      cvvField.render(cardCvvContainer);
      const expiryField = cardField.ExpiryField();
      expiryField.render(cardExpiryContainer);
      // Add click listener to the submit button and call the submit function on the CardField component
      multiCardFieldButton.addEventListener("click", () => {
        cardField
          .submit()
          .then(() => {
            // Handle a successful payment
          })
          .catch((err) => {
            // Handle an unsuccessful payment
          });
      });
    }
  </script>
</html>
```

## Funding eligibility [#funding-eligibility]

The payment buttons automatically render all eligible buttons in a single location on your page by default.

If your use case permits, you can render individual, standalone buttons for each supported payment method. For example, render the PayPal, Venmo, PayPal Credit, and alternative payment method buttons on different parts of the checkout page, alongside different radio buttons, or on entirely different pages.

Even with standalone buttons, your integrations take advantage of the eligibility logic the PayPal JavaScript SDK provides, meaning only the appropriate buttons for the current buyer automatically show up.

### Paypal.rememberFunding( fundingSources ) [#paypalrememberfunding-fundingsources-]

When the customer chooses to save a funding source, that source is stored and available to use for future payments.

### paypal.getFundingSources [#paypalgetfundingsources]

Loop over funding sources and payment methods.

### paypal.isFundingEligible( fundingSource ) [#paypalisfundingeligible-fundingsource-]

Check for funding eligibility from current funding sources.

#### Basic integration

```html lineNumbers
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=funding-eligibility"></script>
```

#### paypal.rememberFunding( fundingSources )

```javascript lineNumbers
paypal.rememberFunding([paypal.FUNDING.VENMO]);
```

#### paypal.getFundingSources

```javascript lineNumbers
paypal.getFundingSources().forEach(function (fundingSource) {
  // ...
});
```

#### paypal.isFundingEligible( fundingSource )

```javascript lineNumbers
paypal.isFundingEligible(fundingSource);
```

## Funding [#funding]

This table includes the available funding sources. The payment buttons automatically render all eligible buttons in a single location on your page by default. If you need to override this, you can specify the buttons you want to show by following the [Standalone payment buttons](/platforms/checkout/standard/customize/standalone-buttons/) guide.

| Funding source               | Payment button               |
| ---------------------------- | ---------------------------- |
| `paypal.FUNDING.PAYPAL`      | PayPal                       |
| `paypal.FUNDING.CARD`        | Credit or debit cards        |
| `paypal.FUNDING.CREDIT`      | PayPal Credit                |
| `paypal.FUNDING.VENMO`       | Venmo                        |
| `paypal.FUNDING.PAYLATER`    | Pay Later/Pay in 4           |
| `paypal.FUNDING.SEPA`        | SEPA-Lastschrift             |
| `paypal.FUNDING.BANCONTACT`  | Bancontact                   |
| `paypal.FUNDING.EPS`         | eps                          |
| `paypal.FUNDING.GIROPAY`     | giropay (Legacy) &#x2A;*\*** |
| `paypal.FUNDING.IDEAL`       | iDEAL                        |
| `paypal.FUNDING.MERCADOPAGO` | Mercado Pago                 |
| `paypal.FUNDING.MYBANK`      | MyBank                       |
| `paypal.FUNDING.P24`         | Przelewy24                   |
| `paypal.FUNDING.SOFORT`      | SOFORT (Legacy) &#x2A;*\***  |

> **Warning:** **Important:**
>
>  giropay was sunset on June 30, 2024. PayPal will not support giropay payments starting July 1, 2024. Offer your users PayPal wallet and other alternative payment methods. 
>
> [Learn more](https://www.paypal.com/us/cshelp/article/giropay-deprecation-help1183)
>
> .

> **Warning:** **Important:**
>
>  Sofort was sunset on April 18, 2024. PayPal will not support Sofort payments starting April 19, 2024. Offer your users PayPal wallet and other alternative payment methods. 
>
> [Learn more](https://www.paypal.com/us/cshelp/article/sofort-deprecation-help1145)
>
> .

## Messages [#messages]

Use when you want to show Pay Later messages on your site. Because Pay Later offers differ by country, certain options for the `messages` component render differently depending on the buyer's location. For complete details, as well as country-specific examples, see Pay Later [Reference](/pay-later/reference).

## See also [#see-also]

* [JavaScript SDK script configuration](/sdk/js/configuration/).
* [Optimize the performance of the JavaScript SDK](/sdk/js/performance/).