Payment Method Messaging Element

Product Illustration

Overview

The Payment Method Messaging Element is a UI component designed to notify customers about available "Buy Now, Pay Later" (BNPL) payment options. It automatically calculates eligible plans and conditions, generates localized descriptions, and renders them seamlessly within your checkout form's theme.

Integration Guide

Quick Start

1. Include the SDK

Add UseePay's official JavaScript SDK to your HTML using a <script> tag:

2. Verify SDK Loading

Ensure the SDK is properly mounted on the window object before calling any methods:

3. Initialize UseePay

Instantiate UseePay using the public key retrieved from your UseePay Merchant Dashboard:

4. Create Elements Instance

Initialize the UseePay Elements manager to create and handle UI components:

5. Create PaymentMethodMessaging Element

Create the paymentMethodMessaging element to automatically render BNPL promotional messaging (e.g., Klarna, Afterpay/Clearpay, Affirm) on your checkout page.

Options Parameter Reference

Parameter	Type	Required	Description
`appId`	`String`	Yes	Domain or merchant identifier for the transaction entity.
`amount`	`Number`	Yes	Order amount (e.g., `99` represents $99 USD).
`currency`	`String`	Yes	3-letter ISO currency code (e.g., `USD`).
`paymentMethodTypes`	`Array`	Yes	List of BNPL payment methods to evaluate and display.
`countryCode`	`String`	Optional	2-letter ISO country code of the customer (e.g., `US`).

Supported Capabilities

Payment Method Types (paymentMethodTypes):
klarna, afterpay_clearpay, affirm

Currencies (currency):
USD, GBP, EUR, DKK, NOK, SEK, CAD, AUD, NZD, PLN, CZK, CHF, RON

Countries / Regions (countryCode):
AT, AU, BE, CA, CH, CZ, DE, DK, ES, FI, FR, GB, GR, IE, IT, NL, NO, NZ, PL, PT, RO, SE, US

6. Mount the Element

Mount the element to a container element on your page using its DOM ID:
Here is the updated section with direct method descriptions and examples:

Method

Example

HTML:

JavaScript:

🎉 Congratulations! Once mounted, the integration is complete!

Supported Locales

By default, the locale is set to auto (detects browser language automatically). The following locales are supported:

Value	Locale Description
`auto`	Detects language automatically from the customer's browser
`ar`	Arabic
`bg`	Bulgarian (Bulgaria)
`cs`	Czech (Czech Republic)
`da`	Danish (Denmark)
`de`	German (Germany)
`el`	Greek (Greece)
`en`	English
`en-GB`	English (United Kingdom)
`es`	Spanish (Spain)
`es-419`	Spanish (Latin America)
`et`	Estonian (Estonia)
`fi`	Finnish (Finland)
`fil`	Filipino (Philippines)
`fr`	French (France)
`fr-CA`	French (Canada)
`he`	Hebrew (Israel)
`hr`	Croatian (Croatia)
`hu`	Hungarian (Hungary)
`id`	Indonesian (Indonesia)
`it`	Italian (Italy)
`ja`	Japanese (Japan)
`ko`	Korean (South Korea)
`lt`	Lithuanian (Lithuania)
`lv`	Latvian (Latvia)
`ms`	Malay (Malaysia)
`mt`	Maltese (Malta)
`nb`	Norwegian Bokmål
`nl`	Dutch (Netherlands)
`pl`	Polish (Poland)
`pt`	Portuguese (Portugal)
`pt-BR`	Portuguese (Brazil)
`ro`	Romanian (Romania)
`ru`	Russian (Russia)
`sk`	Slovak (Slovakia)
`sl`	Slovenian (Slovenia)
`sv`	Swedish (Sweden)
`th`	Thai (Thailand)
`tr`	Turkish (Turkey)
`vi`	Vietnamese (Vietnam)
`zh`	Chinese Simplified (China)
`zh-HK`	Chinese Traditional (Hong Kong)
`zh-TW`	Chinese Traditional (Taiwan)

Messaging Element

Payment Method Messaging Element#

Product Illustration#

Overview#

Integration Guide#

Quick Start#

1. Include the SDK#

2. Verify SDK Loading#

3. Initialize UseePay#

4. Create Elements Instance#

5. Create PaymentMethodMessaging Element#

Options Parameter Reference#

Supported Capabilities#

6. Mount the Element#

Method#

Example#

Supported Locales#