Payment Buttons

Three button types

Each type maps to something Checkout Sessions already does — the button is just the fastest way to trigger it from a page.

Live preview

These are the real buttons, loaded from the SDK below — resize your window or view source to see them render.

Demo buttons above use placeholder sessions and won't complete a real checkout.

How it fits together

The button never sees your secret key and never calls the Checkout Sessions or Subscriptions API directly — that call has to happen on your server, same as every other MyroPay integration. The button's job is everything after that: rendering, the loading state, and sending the customer to checkout.myropay.com.

1. Customer clicks the button.
2. The button calls your createSession function, which hits your own backend.
3. Your backend calls MyroPay's /api/sessions.php (or /api/subscriptions.php) with your app secret, and returns that response to the browser.
4. The button reads the checkout URL out of the response and sends the customer to Checkout.
5. Checkout redirects back to your success_url / cancel_url when they're done — set those when you create the session, exactly as you would without the button.

Quick start — one‑off payment

<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 directly
      const res = await fetch('/api/create-myropay-session', { method: 'POST' });
      return res.json(); // forward MyroPay's response as-is
    }
  }).render('#myropay-button');
</script>

<?php
// api/create-myropay-session.php — this is the only place your secret key lives
$res = file_get_contents('https://checkout.myropay.com/api/sessions.php', false, stream_context_create([
    'http' => [
        'method'  => 'POST',
        'header'  => "Content-Type: application/json\r\nAuthorization: Bearer {$_ENV['MYROPAY_SECRET_KEY']}\r\n",
        'content' => json_encode([
            'amount'      => 5000,
            'currency'    => 'NGN',
            'description' => 'Order #1042',
            'success_url' => 'https://yourshop.com/thank-you',
            'cancel_url'  => 'https://yourshop.com/cart',
        ]),
    ],
]));

header('Content-Type: application/json');
echo $res; // forward MyroPay's JSON straight through

Escrow payment

Same pattern — the only difference is the escrow flag your backend sends when creating the session.

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

{
  "amount": 45000,
  "currency": "NGN",
  "description": "Custom furniture — 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

For recurring billing, your backend calls the Subscriptions API's subscribe action instead of Checkout Sessions directly — it creates the subscription and the first invoice's checkout session in one call.

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

No backend at all: static payment links

If you already have a reusable session_id or checkout URL — a fixed‑price payment link, or a subscription invoice you generated elsewhere — skip createSession entirely.

<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>

MyroPay.Button({ type: 'pay', sessionId: 'cs_live_xxxxxxxxxxxx' }).render('#btn');
// or, with a full URL you already have:
MyroPay.Button({ type: 'pay', checkoutUrl: 'https://checkout.myropay.com/?session=cs_live_xxx' }).render('#btn');

API reference

MyroPay.Button(options)

What createSession() can return

Whatever your backend proxy forwards from MyroPay's API — the SDK checks these shapes in order, so the simplest possible backend route just echoes the response body:

Methods

Styling

The SDK injects its own scoped CSS (prefixed .mrp-btn) and inline SVG icons — no external stylesheet, no webfont dependency, so it renders correctly on any page regardless of your site's own CSS or fonts. Use the color option for simple accent overrides; for anything more involved, target .mrp-btn in your own CSS after the button renders.

Security notes

• The button SDK itself ships no secret and makes no calls to MyroPay's API — it only ever talks to your own createSession endpoint and then redirects to checkout.myropay.com.
• Keep your app secret server‑side only, exactly as with every other MyroPay integration — the button changes nothing about that.
• Validate the amount/currency/order on your own server when creating the session; never trust values passed from the client into your createSession route.