Embed the pay page

Before you start

• A merchant account with Dralako — ask us if your account is not a merchant account yet (it is the same account you use for API keys).
• The domain you will embed from, e.g. https://shop.example. It must be https; http://localhost:PORT is accepted on the sandbox only, so you can build and test locally.
• Your account email + password (to authorise the change).

1. Register your site

Log in to get a session, then register the domain you will embed from.

# 1. Exchange your email + password for a session
resp=$(curl -s -X POST https://sandbox.dralako.io/api/auth/unlock \
  -H 'Content-Type: application/json' \
  -d '{"email":"you@example.com","password":"your-password"}')

SESSION=$(echo "$resp" | jq -r .token)
ACCOUNT=$(echo "$resp" | jq -r .user_id)

# 2. Register the site you will embed from
AUTH="Authorization: Bearer"
curl -X PUT "https://sandbox.dralako.io/api/users/$ACCOUNT/embed-origins" \
  -H "$AUTH $SESSION" \
  -H 'Content-Type: application/json' \
  -d '{"origins":["https://shop.example"]}'

Response:

{ "origins": ["https://shop.example"], "max": 20 }

Check what is registered at any time:

curl "https://sandbox.dralako.io/api/users/$ACCOUNT/embed-origins" \
  -H "$AUTH $SESSION"

2. Create the payment

Create the payment request with the card rail and take the pay_url from the response. (Authenticate with your merchant API key here — exchange ak_…/sk_… at POST /v1/auth/token.)

# 1. Fetch an access token with your merchant API key
TOKEN=$(curl -s -X POST https://sandbox.dralako.io/v1/auth/token \
  -H 'Content-Type: application/json' \
  -d '{"client_id":"ak_...","client_secret":"sk_..."}' | jq -r .access_token)

# 2. Create the payment — rail "cc" for embedded checkout
curl -X POST https://sandbox.dralako.io/v1/transactions \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"amount":25000,"rail":"cc","description":"Order #123"}'

{
  "id": "inv_...",
  "pay_url": "https://sandbox.dralako.io/pay/<token>",
  "amount_mga": 25000,
  "fee_mga": 3375,
  "total_mga": 28375
}

The card fee is paid by your customer: the total is what they pay, and your wallet is credited the amount.

3. Embed it

<iframe
  src="https://sandbox.dralako.io/pay/<token>"
  width="420" height="640" style="border:0"
  title="Dralako payment"></iframe>

Recommended size: 420 × 640. The page is responsive, so other sizes work too. No JavaScript library or browser extension is required.

The rules

• Exact origin match. https://shop.example and https://shop.example:8443 are different origins — register the one that appears in your address bar (scheme + host + port).
• https only, except http://localhost[:PORT], which works on the sandbox so you can develop locally.
• Subdomains: register https://*.example.com to cover any subdomain (https://www.example.com, https://checkout.example.com, …). It does not cover example.com itself — add that separately if you need it.
• Up to 20 origins per merchant.
• Invalid entries reject the whole update — if one entry is wrong the call returns 400 INVALID_ORIGINS and nothing changes.
• Send {"origins": []} to remove everything and go back to "not embeddable".

What customers see

• Card payments work fully inside the embed.
• Mobile money (MVola, Airtel, Orange) cannot run inside an embed — those payment pages must open as a real page. If the invoice is a mobile-money one, the embed shows the customer a short message and an "Open payment page" button that opens it in a new tab.

Verify it works

1. Open a page on your site that contains the iframe.
2. The payment page should appear inside it.
3. Pay with a test card on the sandbox and confirm the invoice becomes paid.

If you see an empty frame instead, open your browser's developer console — it will say something like:

Refused to display 'https://sandbox.dralako.io/pay/...' in a frame because an
ancestor violates the following Content Security Policy directive:
"frame-ancestors 'self' https://shop.example".

That means the origin you are embedding from is not in your list. Compare it character by character with what you registered (scheme, host, port) and add it.

Security notes

• Only register origins you control. Anything on the list can frame your checkout page — which is what you want for your own site, and what you do not want for someone else's.
• Every change to your list is recorded in an audit trail (who, when, what changed). We can show it to you on request.
• Remove origins you no longer use (send only the ones you still need).
• Your pay_url token is the payment link — treat it like a password and only place it in pages your customers load over https.

Reference