Accept Payments Securely
with Magpie Components

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

<!-- 2. Add a container for the card element -->
<div id="card-element"></div>

<script>
  // 3. Initialize Magpie with your public key
  const magpie = new Magpie('pk_test_your_key_here');

  // 4. Create and mount the card element
  const elements = magpie.elements();
  const card = elements.create('card');
  card.mount('#card-element');

  // 5. Create a payment source
  const {source, error} = await card.createSource({
    name: 'John Doe'
  });
</script>