PDP Messaging

Overview

The PDP (Product Detail Page) messaging component allows merchants to display financing options directly on their product pages. This provides customers with clear, upfront information about their payment options, helping to improve conversions and increase affordability perception.

By interacting with the PDP messaging, customers can begin their application process for financing, leading to a seamless checkout experience.

---

Integration

PDP Component

To integrate the PDP messaging component into your site, use the following React component:

import React, { useEffect } from "react";

const BackdPayPdp = ({ total, type = "BackdPay", id, variant }) => {
  useEffect(() => {
    if (window.widgetBackd) {
      // Get the PDP display using getPDP_display accompanied with your public_api_key
      widgetBackd.PDP.getPDP_display(import.meta.env.PUBLIC_API_KEY);
    }
  }, [total]);
  return (
    <div
      className="backd-pdp-root"
      style={{ width: "100%" }}
      data-total={total}
      data-type={type}
      data-id={id}
      data-variant={variant}
    />
  );
};

export default BackdPayPdp;

Usage Example

The component renders its own styled button — no wrapper div is required. Place it directly where you want it displayed:

<BackdPayPdp total={orderTotal} id="1" type="" />
<BackdPayPdp total={orderTotal} id="2" type="net30" variant="green" />
<BackdPayPdp total={orderTotal} id="3" type="net30split" variant="dark" />

Parameters

Prop Name	Type	Default	Description
total	Number	Required	The total amount for the product or order.
type	String	"BackdPay"	Specifies the display variant — see Types below.
id	String	Required	A unique identifier for the PDP instance.
variant	String	"white"	Background color scheme — "white", "green", or "dark".

---

Types

"" or "BackdPay" — Generic

Displays a single-line message with the BackdPayments logo.

---

"net30" — Net 30

Displays the best available monthly payment amount alongside the BackdPayments logo.

---

"net30split" — Net 30 Split

A two-row layout that shows the Net 30 term and the best monthly price side-by-side, separated by a vertical "OR" divider, with the BackdPayments logo displayed below.

---

Styling

The component handles its own border, background, padding, and hover state — no wrapper styling is needed. The variant prop controls the background color:

variant	Background	Border	Text
"white"	#ffffff	#d1d5db	default
"green"	#DEFBEB	#a8dfc0	default
"dark"	#0B372B	#166534	#dcfce7

The component uses CSS Container Queries to adapt its font size, padding, and logo size based on its own width (not the viewport), making it suitable for sidebars, modals, or any variable-width container.

---

For any issues or questions, please contact support.