Overview

The Paze® service provides a custom HTML element, <paze-message>, that you can place anywhere in your page layout.

Paze messaging is an optional feature that can be added to an existing Paze workflow.

The Paze JavaScript SDK must be loaded and initialized prior to adding the HTML messaging element. Once the SDK initialization is complete, create <paze-message> element and attach it to the DOM. The SDK will replace this element with an active offer message.

If no message exists, the SDK returns an HTTP 204 response.
No additional API calls or page-specific logic are required.

Implementing Messages

If you haven't already, begin with one of the available checkout flows:

Sequence

The basic sequence is followed directly from the selected checkout flow.

Load the Web SDK library.
Initialize the Web SDK.
Display the Paze button. At this time, display the Paze Message alongside the Paze payment option.
Continue with the selected checkout flow as normal.

Add the Messaging Component

Code Sample

Below is a basic example of the <paze-message> web component and implementation. This should be included on pages where the Paze SDK has been initialized.

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="pazeMsgContainer">
      <paze-message
        message-placement="checkout"
        brand-style="logo"
        container-style="full"
        theme="light"
        font-size="14px">
      </paze-message>
    </div>
    <script
      src="https://checkout.wallet.cat.earlywarning.io/web/resources/js/digitalwallet-sdk.js"
      type="text/javascript">
    </script>
  </body>
</html>

Message Attributes

Page theme does not override message container-style.

All colors, spacing, and layout remain SDK-controlled.

message-id string optional

message-id is the Paze generated identifier used when multiple messages are configured (for example, A/B testing or campaign variations). Most merchants will not need to provide this attribute unless explicitly instructed by Paze.

Example: Any v4 UUID

message-placement string optional

message-placement controls which configured message is selected for this element.
Options:

checkout ( default value )
productPage
checkoutMobile
productPageMobile
cartPage
cartPageMobile

Example: message-placement="checkout"

theme string optional

Controls visual theme.

Options:

light ( default value )
dark

Example: theme="dark"

brand-style string optional

Controls branding presentation.

logo: Displays the Paze logo alongside the message.
text: Displays the message without the Paze logo.

Example: brand-style="logo"

container-style string optional

Controls the container presentation for background and border.

full: Displays a message background and container border.
border: The background is transparent and a border is displayed.
none: No background or border displayed.

Example: container-style="full"

font-size string optional

Controls the size of the message text.

Example: font-size="14px"