Accept payments with one script tag

Drop a MyroPay button into any page. It renders the button, shows a loading state, and sends the customer to checkout.myropay.com. Your server still creates the session.

Live preview

These are the real buttons from the SDK. The demo sessions are placeholders and won't complete a checkout.

The button never holds a secret

1. The customer clicks the button.
2. It calls your createSession function, which calls your own backend.
3. Your backend calls MyroPay with your secret key and returns the response unchanged.
4. The button reads checkout_url and redirects.
5. Checkout returns the customer to your success_url or cancel_url.

Create buttons from your dashboard

If you don't have a backend, create the button in the Business dashboard under Payment Buttons: choose Pay, Escrow or Subscribe, set the price, and copy the two lines of HTML it gives you.

<div data-myropay-button data-type="pay" data-button-id="btn_live_xxxxxxxxxxxxxxxxxxxx"></div>
<script src="https://checkout.myropay.com/buttons/mrp-button.js" async></script>

The price, currency, escrow terms and redirect URLs are saved on MyroPay, so visitors can't change them from the page. Buttons created with a test app (btn_test_) run on sandbox.myropay.com; live buttons run on checkout.myropay.com. Subscribe buttons ask the customer for their email before payment. Prefer your own server? The guides below still apply.

One-off payment

Copy<div id="myropay-button"></div>
<script src="https://checkout.myropay.com/buttons/mrp-button.js"></script>
<script>
  MyroPay.Button({
    type: 'pay',
    createSession: async () => {
      // calls YOUR backend, not MyroPay
      const res = await fetch('/api/create-myropay-session', { method: 'POST' });
      return res.json();          // forward MyroPay's response as-is
    }
  }).render('#myropay-button');
</script>

Copy<?php
// api/create-myropay-session.php: the only place the secret key lives
$ctx = stream_context_create(['http' => [
  'method'  => 'POST',
  'header'  => "Content-Type: application/json\r\nX-API-Key: " . getenv('MYROPAY_SECRET_KEY') . "\r\n",
  'content' => json_encode([
    'amount'      => 5000,          // whole units: ₦5,000
    'currency'    => 'NGN',         // NGN, USD, GBP, EUR, GHS, KES, ZAR or CAD
    'description' => 'Order #1042',
    'success_url' => 'https://yourshop.com/thank-you',
    'cancel_url'  => 'https://yourshop.com/cart',
  ]),
]]);
header('Content-Type: application/json');
echo file_get_contents('https://checkout.myropay.com/api/sessions.php?action=create', false, $ctx);

Escrow payment

Same pattern with type: 'escrow'. Your backend adds the escrow fields when it creates the session.

CopyMyroPay.Button({
  type: 'escrow',
  createSession: async () => (await fetch('/api/create-myropay-escrow-session', { method: 'POST' })).json()
}).render('#myropay-escrow-button');

Copy{
  "amount": 45000,
  "currency": "NGN",
  "description": "3 seater sofa",
  "escrow": true,
  "escrow_condition": "Buyer confirms delivery and inspects the item",
  "escrow_deadline_days": 7,
  "success_url": "https://yourshop.com/thank-you",
  "cancel_url": "https://yourshop.com/cart"
}

Subscription payment

Your backend calls POST /api/subscriptions.php?action=subscribe, which creates the subscription and its first invoice's checkout session in one call.

CopyMyroPay.Button({
  type: 'subscribe',
  createSession: async () => (await fetch('/api/create-myropay-subscription', { method: 'POST' })).json()
  // { subscription, invoice: { checkout_url, ... } }
}).render('#myropay-subscribe-button');

Static payment links

If you already have a reusable session id or checkout URL, skip createSession.

Copy<div data-myropay-button data-type="pay" data-session-id="cs_live_xxxxxxxxxxxx"></div>
<script src="https://checkout.myropay.com/buttons/mrp-button.js"></script>

CopyMyroPay.Button({ type: 'pay', sessionId: 'cs_live_xxxxxxxxxxxx' }).render('#btn');
MyroPay.Button({ type: 'pay', checkoutUrl: 'https://checkout.myropay.com/?session=cs_live_xxx' }).render('#btn');

Options and return shapes

The SDK injects its own scoped CSS (.mrp-btn) and inline SVG icons, so it needs no stylesheet or web font. Validate amount, currency and order on your server; never trust values sent from the client to your createSession route. For a modal or inline checkout with only a public key, see the Checkout SDK.