# Messaging with buttons (/limited-release/commerce-platform/accept-payments/standard/customize/messaging-with-buttons)



Integrate messaging directly with your buttons to promote Pay Later offers and other PayPal value propositions to your customers. Adding messaging can help improve conversion and attract new customers.

<img src="https://www.paypalobjects.com/ppdevdocs/paylater-horizontal-two%20button-100.png" alt="image" />

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

## Know before you code [#know-before-you-code]

> **Info:** ### Prerequisites [#prerequisites]
>
> This feature modifies an existing [checkout integration](/limited-release/commerce-platform/accept-payments/standard/) and uses the following
>
> * [PayPal JavaScript SDK](/sdk/js/configuration/).
> * [Orders REST API - Create order endpoint](/api/orders/v2/orders-create).

> **Info:** ### Explore PayPal APIs with Postman [#explore-paypal-apis-with-postman]
>
> You can use Postman to explore and test PayPal APIs. Learn more in our [Postman guide](/api/rest/postman).

## 1. Add messaging to buttons [#1-add-messaging-to-buttons]

Include your messaging options to the buttons configuration object. Learn more about the full list of available options by reviewing the [JavaScript SDK reference](/sdk/js/) page. To display the strongest message to the customer, use `message.amount` with the current total based on the product or cart.

**Note:** The `message.amount` option functions independently from the captured order total and has no impact on it.

```javascript lineNumbers
const buttons = paypal.Buttons({
  message: {
    amount: 100, // Update to your cart or product total amount
    align: 'center',
    color: 'black',
  }
});
buttons.render('#paypal-button-container');
```

### Button Examples [#button-examples]

The message content adapts to the buttons that are displayed:

Description

Options

Buttons

Vertical Stack

```javascript lineNumbers
paypal.Buttons({
  style: { layout: "vertical" },
  message: { amount: 100 }
});
```

**Note:** The message is positioned to the top to make room for the text that accompanies the debit/credit Card button.

<img src="https://www.paypalobjects.com/ppdevdocs/paylater-payin4-100-vertical.png" alt="image" />

Horizontal Stack

```javascript lineNumbers
paypal.Buttons({
  style: { layout: "horizontal" },
  message: { amount: 100 }
});
```

<img src="https://www.paypalobjects.com/ppdevdocs/paylater-payin4-horizontal-two%20button-100.png" alt="image" />

Standalone PayPal

```javascript lineNumbers
paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,
  message: { amount: 20 }
});
```

<img src="https://www.paypalobjects.com/ppdevdocs/paypal-standalone-non-paylater.png.png" alt="image" />

Standalone Pay Later

```javascript lineNumbers
paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYLATER,
  message: { amount: 100 }
});
```

<img src="https://www.paypalobjects.com/ppdevdocs/paylater-paylater-100-standalone.png" alt="image" />

Learn more about standalone button integration best practices by reviewing the [Standalone Buttons](/limited-release/commerce-platform/accept-payments/standard/customize/standalone-payment-buttons/) page.

## 2. Update the message amount [#2-update-the-message-amount]

As the product count or cart total changes, you can update the `message.amount` to reflect the latest total.

```javascript lineNumbers
buttons.updateProps({
  message: {
    amount: 200, // Update to your cart or product total amount
    align: 'center',
    color: 'black',
  }
});
```

> **Info:** **Note:** Ensure that all previously specified message options are passed into `updateProps` including any options that have not changed; otherwise, they will be overwritten with default values.

## 3. Complete your integration [#3-complete-your-integration]

Return to the [Set up standard payments](/limited-release/commerce-platform/accept-payments/standard/) guide to create and capture the order.

## See also [#see-also]

> **Info:** Pay Later messaging
>
> Learn more about adding messaging next to your product price and cart totals by reviewing the Pay Later Messages page

> **Info:** Javascript SDK
>
> Learn more about passing parameters to customize your integration by reviewing the JavaScript SDK page.