Build Any Type of Form
Collect payments with ease.

<!-- Paste anywhere -->
<iframe
  src="https://formpesa.wasmer.app/f/your-form-id/embed"
  style="width:100%;max-width:480px;height:600px;border:none;"
  scrolling="no"
  title="Payment Form"></iframe>

import { useEffect, useRef } from 'react';

export default function PaymentForm() {
  const ref = useRef(null);
  useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://formpesa.wasmer.app/embed.js';
    s.onload = () => FormPesa.render(ref.current, { formId: 'your-form-id' });
    document.body.appendChild(s);
  }, []);
  return <div ref={ref} />;
}

<!-- PaymentForm.vue -->
<template>
  <div ref="el"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const el = ref(null);
onMounted(() => {
  const s = document.createElement('script');
  s.src = 'https://formpesa.wasmer.app/embed.js';
  s.onload = () => FormPesa.render(el.value, { formId: 'your-form-id' });
  document.body.appendChild(s);
});
</script>

// functions.php
add_shortcode('formpesa', fn($a) => "<iframe src='https://formpesa.wasmer.app/f/{$a['id']}/embed'
  style='width:100%;height:600px;border:none;' scrolling='no'>
</iframe>");

// In any post or page:
[formpesa id="your-form-id"]

<?php // Laravel, Symfony, or plain PHP
$id = 'your-form-id';
echo "<iframe src='https://formpesa.wasmer.app/f/{$id}/embed'
  style='width:100%;max-width:480px;height:600px;border:none;'
  scrolling='no' title='Payment Form'></iframe>";

<!-- Add a Custom Liquid block in your theme editor -->
<iframe
  src="https://formpesa.wasmer.app/f/your-form-id/embed"
  style="width:100%;max-width:480px;height:600px;border:none;margin:2rem auto;display:block;"
  scrolling="no"
  title="Payment Form"></iframe>