Magpie

Magpie Components

A secure, iframe-based card input system for collecting payment card data without exposing sensitive information to your application. Clone of Stripe Elements.

Read Documentation View Examples

Quick Start

<!-- 1. Add the SDK -->
<script src="https://components.magpie.im/sdk/magpie.js"></script>

<!-- 2. Create container elements -->
<div id="card-number"></div>
<div id="card-expiry"></div>
<div id="card-cvc"></div>

<!-- 3. Initialize and mount -->
<script>
  const magpie = new Magpie("pk_live_your_key");
  const elements = magpie.elements();

  elements.create("cardNumber").mount("#card-number");
  elements.create("cardExpiry").mount("#card-expiry");
  elements.create("cardCvc").mount("#card-cvc");
</script>
🔒

Secure by Design

Card data is entered in cross-origin iframes. Your JavaScript never touches sensitive information.

⚡

Easy Integration

Drop-in JavaScript SDK. Just three lines to mount the card fields and one call to create a source.

🎨

Fully Customizable

Style the container elements however you want. Pass style options to control the iframe input appearance.

🌍

PCI Compliant

Reduce your PCI compliance scope. Card data never touches your servers or JavaScript.

Architecture Overview

Magpie Components consists of three parts working together:

Your Page
  └─ Loads magpie.js
       └─ Creates three iframes (cardNumber, cardExpiry, cardCvc)
            └─ Each iframe loads from https://components.magpie.im
                 └─ User types card data inside iframes
                      └─ On createSource():
                           └─ iframe POSTs card data to /api/v2/sources
                                └─ Proxy forwards to api.magpie.im
                                     └─ Returns source token (src_xxx)

Explore Examples

See different integration styles and designs. Each example is a complete, working implementation you can copy and modify.

Basic
Minimal integration with no styling. The bare essentials to get up and running.
Open example →
Stripe Style
Clean, professional design inspired by Stripe Checkout. Subtle shadows and focus rings.
Open example →
Kitschy
Loud, colorful, and animated. Gradient backgrounds, Comic Sans, and bouncing emoji.
Open example →
Brutalist
Raw and stark. Monospace font, heavy black borders, zero decoration.
Open example →
Full Form
Every available field: card address, owner billing & shipping, redirect URLs, and metadata.
Open example →

Next Steps