Embedded Checkout

Overview

Keep customers on your website throughout the payment flow. The embed option uses the mount method to display the checkout on any HTML element you desire - giving you complete control over where and how the payment form appears on your page.

See It in Action

Visit embedcheckout.payonify.com to see live demos for some of the embedded checkout possibilities.

Mount Examples

Option	Description	Best For
Drop-In	Modal overlay appears when customer clicks pay	Quick checkout without leaving the page
Sidebar	Payment form displays next to your product	E-commerce product pages
Slide-In	Payment form slides in from the right	Mobile-friendly experiences

How It Works

sequenceDiagram participant Customer participant YourWebsite participant YourServer participant Payonify Customer->>YourWebsite: Views product page YourWebsite->>YourServer: Request checkout session YourServer->>Payonify: POST /v1/checkout/sessions Payonify-->>YourServer: Return session with client_secret YourServer->>YourServer: **Store** checkout session YourServer-->>YourWebsite: Return client_secret YourWebsite->>YourWebsite: Initialize Payonify SDK Customer->>YourWebsite: Clicks "Pay" button YourWebsite->>YourWebsite: Mount payment form Customer->>YourWebsite: Enter payment details YourWebsite->>Payonify: Submit payment Payonify-->>YourWebsite: Payment result Payonify->>YourServer: Send webhook YourServer->>YourServer: Update stored session & fulfill YourWebsite-->>Customer: Show confirmation

Quick Start

All embedded checkout options follow the same basic integration pattern:

Create a Checkout Session (Server-Side)

Code
 
curl https://api.payonify.com/v1/checkout/sessions \
  -u "pk_test_abc123...:sk_test_xyz789..." \
  -H "Content-Type: application/json" \
  -d '{
    "line_items": [
      {
        "unit_amount": 2500,
        "name": "Product Name",
        "quantity": 1
      }
    ],
    "mode": "payment",
    "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
    "cancel_url": "https://yoursite.com/cancel",
    "currency": "usd"
  }'

Response:


Response
 
{
  "id": "cs_f66c6vqvbbhqxe35gbq7",
  "object": "checkout_session",
  "status": "requires_payment_method",
  "mode": "payment",
  "amount": {
    "value": 2500,
    "currency": "usd"
  },
  "line_items": [
    {
      "unit_amount": 2500,
      "name": "Product Name",
      "quantity": 1
    }
  ],
  "url": "https://checkout.payonify.com/c/cs_f66c6vqvbbhqxe35gbq7",
  "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
  "cancel_url": "https://yoursite.com/cancel",
  "customer_email": null,
  "metadata": null,
  "client_secret": "cs_f66c6vqvbbhqxe35gbq7_secret_gv4vr5e5qcfbfv6w53fp7jn3g7qp62eh",
  "submit_type": null,
  "livemode": false,
  "created": 1732437738,
  "expires_at": 1732524138
}

Pass the client_secret from the response above to your frontend.

Add the Payonify SDK
```
Code
 
<script src="https://js.payonify.com/v1/payonify.umd.js"></script>
```
Available Library Formats

Format File Extension Best For
UMD (recommended) .umd.js Browser script tags, universal compatibility
ES Modules .esm.js Modern bundlers (Vite, Webpack 5+), tree-shaking
CommonJS .js Node.js, older build tools
- UMD — Works in browsers and Node.js. Supports AMD, CommonJS, and global variables. Ideal for direct <script> tag inclusion.
- ES Modules — Modern JavaScript standard. Supports tree-shaking for smaller bundles. Recommended for new projects.
- CommonJS — Best for Node.js environments. Compatible with older build tools. Maximum compatibility.
Choosing the Right Format
- Web Development: Use UMD for direct script inclusion or ESM for modern bundlers
- Node.js Backend: Use CommonJS for server-side code
- Modern Projects: Prefer ESM for better tree-shaking and smaller bundles

Format	File Extension	Best For
UMD (recommended)	`.umd.js`	Browser script tags, universal compatibility
ES Modules	`.esm.js`	Modern bundlers (Vite, Webpack 5+), tree-shaking
CommonJS	`.js`	Node.js, older build tools

Initialize and Mount

The mount method gives you complete flexibility to display the checkout on any HTML element in your page:


Code
 
const payonify = new Payonify({
  publishableKey: "pk_test_abc123...",
});

payonify.onSuccess = (data) => {
  console.log("Payment successful!", data);
  window.location.href = "/success";
};

payonify.onError = (error) => {
  console.error("Payment error:", error);
};

payonify.onClose = () => {
  console.log("Payment modal closed");
};

// Mount the checkout on any HTML element you choose
payonify.mount({
  container: document.getElementById("checkout-container"),
  clientSecret: "cs_xxx_secret_yyy",
});

Handle Webhooks (Server-Side)

Same as hosted checkout - use webhooks for reliable order fulfillment. See the Webhooks Guide.

Choose Your Display Option

Select the integration guide that best fits your UX:

Drop-In Modal - Full HTML, CSS, and JavaScript for a modal overlay
Sidebar - Full integration for a side-by-side layout
Slide-In - Full integration for a slide-in panel

Next Steps

Hosted Checkout - Simpler integration with redirect
Webhooks Guide - Handle payment events reliably
API Reference - Full checkout session parameters

Last modified on April 11, 2026

Hosted Checkout Drop-In

Overview

See It in Action

Visit embedcheckout.payonify.com to see live demos for some of the embedded checkout possibilities.

Option

Description

Best For

Drop-In

Modal overlay appears when customer clicks pay

Quick checkout without leaving the page

Sidebar

Payment form displays next to your product

E-commerce product pages

Slide-In

Payment form slides in from the right

Mobile-friendly experiences

How It Works

Quick Start

All embedded checkout options follow the same basic integration pattern:

Create a Checkout Session (Server-Side)

Code
 
curl https://api.payonify.com/v1/checkout/sessions \
  -u "pk_test_abc123...:sk_test_xyz789..." \
  -H "Content-Type: application/json" \
  -d '{
    "line_items": [
      {
        "unit_amount": 2500,
        "name": "Product Name",
        "quantity": 1
      }
    ],
    "mode": "payment",
    "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
    "cancel_url": "https://yoursite.com/cancel",
    "currency": "usd"
  }'

Response:


Response
 
{
  "id": "cs_f66c6vqvbbhqxe35gbq7",
  "object": "checkout_session",
  "status": "requires_payment_method",
  "mode": "payment",
  "amount": {
    "value": 2500,
    "currency": "usd"
  },
  "line_items": [
    {
      "unit_amount": 2500,
      "name": "Product Name",
      "quantity": 1
    }
  ],
  "url": "https://checkout.payonify.com/c/cs_f66c6vqvbbhqxe35gbq7",
  "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
  "cancel_url": "https://yoursite.com/cancel",
  "customer_email": null,
  "metadata": null,
  "client_secret": "cs_f66c6vqvbbhqxe35gbq7_secret_gv4vr5e5qcfbfv6w53fp7jn3g7qp62eh",
  "submit_type": null,
  "livemode": false,
  "created": 1732437738,
  "expires_at": 1732524138
}

Pass the client_secret from the response above to your frontend.

Add the Payonify SDK
```
Code
 
<script src="https://js.payonify.com/v1/payonify.umd.js"></script>
```
Available Library Formats

Format File Extension Best For
UMD (recommended) .umd.js Browser script tags, universal compatibility
ES Modules .esm.js Modern bundlers (Vite, Webpack 5+), tree-shaking
CommonJS .js Node.js, older build tools
- UMD — Works in browsers and Node.js. Supports AMD, CommonJS, and global variables. Ideal for direct <script> tag inclusion.
- ES Modules — Modern JavaScript standard. Supports tree-shaking for smaller bundles. Recommended for new projects.
- CommonJS — Best for Node.js environments. Compatible with older build tools. Maximum compatibility.
Choosing the Right Format
- Web Development: Use UMD for direct script inclusion or ESM for modern bundlers
- Node.js Backend: Use CommonJS for server-side code
- Modern Projects: Prefer ESM for better tree-shaking and smaller bundles

Format	File Extension	Best For
UMD (recommended)	`.umd.js`	Browser script tags, universal compatibility
ES Modules	`.esm.js`	Modern bundlers (Vite, Webpack 5+), tree-shaking
CommonJS	`.js`	Node.js, older build tools

Initialize and Mount

The mount method gives you complete flexibility to display the checkout on any HTML element in your page:


Code
 
const payonify = new Payonify({
  publishableKey: "pk_test_abc123...",
});

payonify.onSuccess = (data) => {
  console.log("Payment successful!", data);
  window.location.href = "/success";
};

payonify.onError = (error) => {
  console.error("Payment error:", error);
};

payonify.onClose = () => {
  console.log("Payment modal closed");
};

// Mount the checkout on any HTML element you choose
payonify.mount({
  container: document.getElementById("checkout-container"),
  clientSecret: "cs_xxx_secret_yyy",
});

Handle Webhooks (Server-Side)

Same as hosted checkout - use webhooks for reliable order fulfillment. See the Webhooks Guide.

Overview

See It in Action

Mount Examples

How It Works

Quick Start

Choosing the Right Format

Choose Your Display Option

Next Steps

Overview

See It in Action

Mount Examples

How It Works

Quick Start

Choosing the Right Format

Choose Your Display Option

Next Steps