---
title: Embed Paypage as Overlay
slug: payments/embed-paypage-as-overlay
description: Embed the Unaric Payments paypage as an overlay modal for a smooth, non-redirect checkout experience in Salesforce.
createdAt: 2025-02-14T21:41:54.750Z
---
You can add a paypage to your website as an "overlay" on top of your current webpage. This way, you can let customers make payments without leaving your site. You can do this by adding a paypage template, in the form of a small amount of JavaScript code, to your website.
### How it works
When they click the button:
- A payment form smoothly appears on top of your website content.
- They fill in their payment details directly in this pop-up form.
- Once they're done (whether they pay successfully or cancel), the payment form disappears, and they're still right where they started on your website
## Flow
```mermaid
sequenceDiagram
participant C as Customer
participant M as Your Website
participant A as Unaric Payments
participant S as Salesforce
C->>M: Initiates payment
M->>A: paymentRef=XYZ customerRef=123 dit=****
critical Payment Processing
A->>A: Validate dit token
A->>A: Process payment
A->>S: Update payment record
option Success
A-->>M: Success response
M-->>C: Confirmation message
option Failure
A-->>M: Error details
M-->>C: Error handling
end
```
:::hint{type="info"}
This overlay is designed for basic use. If you need more complex features or want to customize the payment process deeply, you'd need to dive into the actual code of this "overlay library" and create your own, more advanced version. For simple use cases, this basic overlay is sufficient.
:::
## Parameters
To make the overlay work, you need to provide some information. This information is the same as what you would find in a normal payment page web address ("eCommerce URL"). You can find this URL as a payment record in Salesforce. Think of parameters as pieces of information needed to configure the payment page.
The parameters that are used for setting up the overlay are equivalent to the parameters specified in the "eCommerce URL" (which can be found on any payment record):
| **URL Parameter** | **Overlay Parameter** | **Description** |
| ----------------- | --------------------- | -------------------- |
| pid | paymentRef | Payment record ID |
| pmRef | customerRef | Your organization ID |
| dit | dit | Data integrity token |
**Example**
Let's say you have this payment page URL:
:::BlockQuote
https\://demo.protectedpayments.net/PMWeb1?pmRef=121\&pid=a031n00000XGkm5\&locale=en-GB\&dit=9527c1725cc56eb739d452651a46bc29e286ac6d7b63994f16b035f746455179
:::
From this URL, we can see:
- **customerRef (pmRef)** is *121*
- **paymentRef (pid)** is *a031n00000XGkm5*
- **dit** is *9527c1725cc56eb739d452651a46bc29e286ac6d7b63994f16b035f746455179*
## Implementation
You only need to add a few snippets of JavaScript code to your webpage to get the overlay working.
### 1. Include the JavaScript Library
Include this line of code within the \ section of your HTML document:
:::BlockQuote
\
:::
### 2. Initialize the Payment Form
Set up the `PaymentFormDisplay` payment form with your specific details. You'll need to add this JavaScript code either:
- **Inside \