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 can set it up as defined in the following React component:

import React, { useEffect } from "react";

const BackdPayPdp = ({ total, type = "BackdPay", id }) => {
  useEffect(() => {
    if (window.widgetBackd) {
      // Get the PDP display using getPDP_display function accompanied with your provided public_api_key
      widgetBackd.PDP.getPDP_display(import.meta.env.PUBLIC_API_KEY);
    }
  }, [total]);
  return (
    <div
      // Be sure to the className "backd-pdp-root" and data types
      className="backd-pdp-root"
      data-total={total}
      data-type={type}
      data-id={id}
    />
  );
};

export default BackdPayPdp;

Usage Example

Place the BackdPayPdp component inside a div container where you want it to be displayed:

<div className="border border-gray-500 bg-white w-full text-black p-2 rounded-md cursor-pointer hover:bg-gray-200">
  <BackdPayPdp total={orderTotal} id="1" type="" />
</div>
<div className="border border-gray-500 bg-white w-full text-black p-2 rounded-md cursor-pointer hover:bg-gray-200">
  <BackdPayPdp total={orderTotal} id="2" type="net30" />
</div>

Parameters

Prop Name	Type	Default	Description
total	Number	Required	The total amount for the product or order.
type	String	""	Specifies the messaging type ("" or "net30").
id	String	Required	A unique identifier for the PDP instance.

Type

Default ("") - Generic BackdPay

Cart ("net30") - Cart messaging

---

For any issues or questions, please contact support.