Skip to main content

FramePay

FramePay is a secure, PCI-compliant payment integration solution that allows you to collect payment information without handling sensitive card data directly. By using secure iframes, FramePay ensures your customers' payment information is protected while providing a seamless checkout experience.

What is FramePay?​

FramePay is a client-side payment form solution that:

  • 🔐 Maintains PCI Compliance - Sensitive card data never touches your servers
  • 💳 Supports Multiple Payment Methods - Cards, Apple Pay, Google Pay, and PayPal
  • 🎨 Customizable - Style payment fields to match your brand
  • ⚡ Fast Integration - Get started in minutes with our guides
  • 🌍 Global Ready - Support for multiple currencies and countries

How It Works​

Key benefit: Your server never sees or handles raw card data, reducing PCI compliance scope.

Quick Start​

1. Add FramePay to Your Page​

<link href="https://framepay.payments.ai/framepay.css" rel="stylesheet" />
<script src="https://framepay.payments.ai/framepay.js"></script>

2. Initialize​

Framepay.initialize({
  publishableKey: 'pk_sandbox_YOUR_KEY',
  organizationId: 'org_YOUR_ORG',
  websiteId: 'web_YOUR_WEBSITE',
  transactionData: {
    currency: 'USD',
    amount: 99.99
  }
});

3. Mount Payment Fields​

Framepay.on('ready', function() {
  Framepay.card.mount('#card-number');
});

4. Create Token​

const token = await Framepay.createToken(form, {
  billingAddress: {
    firstName: 'John',
    lastName: 'Doe'
  }
});

That's it! See our Complete Example for a full implementation.

Documentation​

Getting Started​

Core Concepts​

API Reference​

Tutorials​

Payment Methods Supported​

Card Payments​

Accept all major credit and debit cards:

  • 💳 Visa
  • 💳 Mastercard
  • 💳 American Express
  • 💳 Discover
  • 💳 And more...

Digital Wallets​

Provide express checkout options:

  • 🍎 Apple Pay - One-tap payments on Apple devices
  • 🔵 Google Pay - Fast checkout with Google
  • 💙 PayPal - Popular payment platform

Features​

Secure by Design​

  • PCI DSS Level 1 compliant
  • End-to-end encryption
  • Tokenization of sensitive data
  • Secure iframe implementation

Developer Friendly​

  • Simple JavaScript API
  • TypeScript support (via npm package)
  • Comprehensive documentation
  • Working code examples

Customizable​

  • Match your brand styling
  • Custom CSS support
  • Flexible form layouts
  • Light and dark mode support

Global​

  • Multi-currency support
  • International card support
  • Localization ready
  • Global payment methods

Prerequisites​

Before integrating FramePay, you'll need:

  1. Payments AI Account - Sign up if you don't have one
  2. API Credentials:
    • Publishable Key (for frontend)
    • Secret API Key (for backend)
    • Organization ID
    • Website ID
  3. Basic Web Development Knowledge - HTML, JavaScript, and backend development

Get your credentials from the Payments AI Dashboard.

Browser Support​

FramePay works in all modern browsers:

  • ✅ Chrome 60+
  • ✅ Firefox 55+
  • ✅ Safari 11+
  • ✅ Edge 79+
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Security & Compliance​

PCI Compliance​

FramePay helps you maintain PCI DSS compliance by:

  • Hosting payment fields in secure iframes
  • Never exposing raw card data to your JavaScript
  • Tokenizing sensitive information
  • Using encrypted communications

Data Protection​

  • All data transmission uses TLS 1.2+
  • Card data is encrypted at rest
  • Tokens are single-use by default
  • No sensitive data logged

Next Steps​

Choose your path:

For Frontend Developers​

  1. Read the Client-Side Integration guide
  2. Review CSP Configuration
  3. Check out the Complete Example

For Backend Developers​

  1. Read the Backend Integration guide
  2. Understand Payment Flows
  3. Set up Webhooks

For Everyone​

Start with the Complete Example to see everything working together!

Support​

Need help? We're here for you:

Additional Resources​