Buttons and badges

Everything you need to show that you take Coinland Pay: a pay button in four tones, a trust badge for your footer or your checkout, and the raw logo files. You design nothing, and you never have to copy our mark out of a screenshot or redraw it.

There are two ways to take them, and which one you want depends on a single thing -- whether your page runs JavaScript.

The pay button

If you already loaded the script to open the widget, the button is one more call. What it returns is a real <button> element, so you can disable it while your server creates the session and enable it after.

<div id="pay"></div>

<script src="https://my.coinlandexchange.com/pay/v1.js"></script>
<script>
  CoinlandPay.button(document.getElementById("pay"), {
    sessionId: "b3f1…",
    variant: "gold",   // gold | dark | light | outline
    size: "md",        // sm | md | lg
    onComplete: function (payment) { /* … */ }
  });
</script>

Options

Every other option is the one CoinlandPay.open() takes -- sessionId, checkoutUrl, onComplete, onCancel -- because a click calls exactly that.

The trust badge

The badge sets "Secure payment via Coinland" next to the Coinland mark. It belongs wherever a shopper is deciding whether to trust the checkout: beside your pay button, on the order-review step, or in your footer.

CoinlandPay.badge(document.querySelector("footer"), {
  theme: "light",   // dark | light | plain
  size: "md"        // sm | md
});

The badge has no link and no handler by default. Adding an outbound link to your checkout page is not our decision to make; pass href if you want one, and we open it in a new tab with a hardened rel.

The plain theme drops the pill and paints from the current text colour, for setting the badge inside your own footer copy.

Without JavaScript

If your checkout is server-rendered and you would rather not add a script for one button, the same button exists as a ready-made SVG. An <img> inside a link to the session's checkout_url:

<a href="{{checkout_url}}">
  <img src="https://my.coinlandexchange.com/pay/brand/button-en-gold.svg"
       alt="Pay with Coinland" height="48">
</a>

The text inside these files is outlined into paths, not live text. They therefore look identical on every device and depend on no font being installed -- which matters most for the Persian versions, because a browser will not let an SVG loaded through <img> fetch an external font, and live text would fall back to a different typeface on every platform.

If you would rather build the button yourself in CSS and only take our mark, this is enough:

<a href="{{checkout_url}}" style="
     display:inline-flex; align-items:center; gap:9px;
     height:44px; padding:0 20px; border-radius:12px;
     background:#ffb400; color:#020b1f;
     font-weight:700; font-size:14.5px; text-decoration:none;">
  <img src="https://my.coinlandexchange.com/pay/brand/mark-ink.svg" alt="" height="20">
  Pay with Coinland
</a>

The files

Link them straight from our domain or host copies next to your own assets. Either is fine; linking directly means any correction to the mark reaches your site on its own.

The mark

mark-gold.svg · mark-white.svg · mark-ink.svg

The full logo

lockup-{fa,en}-{gold,ink,white}.svg

The badge, as a file

badge-{fa,en}-{dark,light}.svg -- the colour names the pill itself, not your background. Put the dark pill on a light background and the light one on a dark background.

Download everything

Usage rules

These are short, and they exist for one reason: someone who sees the Coinland mark on your site should be able to rely on it.

You may

• Use these files to show that you accept Coinland Pay.
• Scale them freely. They are vectors and their text is outlined, so they never go soft.
• Put them on your site, your app, your invoices and your printed material.

Please do not

• Redraw, recolour, rotate, stretch, or add effects to the mark. Scale only.
• Rebuild the wordmark in another typeface, or retype it as live text.
• Use our mark as your own logo, favicon or app icon.
• Imply that Coinland endorses, owns or operates your business.
• Change a badge's wording. If you need different words, set your own text next to the plain mark.

Clear space and size

• Keep free space on every side of at least half the mark's height.
• Minimum sizes: the mark 16px, a full logo 88px wide, a badge 132px wide. Below that the detail in the mark's ring stops resolving.

Colours

Over a photograph or a busy background, use the white version on a dark overlay -- the gold loses its contrast there.

Need a format that is not here, such as a PNG at a fixed size or something for print? Write to support@coinlandexchange.com.