CR80 PARTNER INTEGRATION

Your brand. Your workflow.

Embed the editor in your website, receive a versioned design and keep your customer relationship and checkout. CR80 supplies the card geometry, rendering and production validation.

1. After approval, open the partner workspace and sign in with the verified email address from your application. Claim your invitation there.
2. Open partner settings. Configure your brand, exact HTTPS origins and physical card catalogue. Each material and technology is a separate SKU.
3. Use the partner ID shown in settings in the examples below. Never put a licence key, API secret or customer login token in iframe URLs or browser code.
4. Start with fictional names and images. Approval enables free testing; it does not begin billing. Test previews carry PROVPERIOD and production endpoints refuse real output.

Embed the editor

Add your website origin, including the scheme and any non-default port, in partner settings. The page embedding the editor must match an approved origin. Use HTTPS in production.

<iframe id="cr80-editor"
  src="https://cr80.se/editor?partner=YOUR_PARTNER_ID&embed=1"
  title="Card editor"
  style="width:100%;height:760px;border:0"
></iframe>

The partner selects branding, catalogue and capabilities. Browser embedding does not grant account access. CR80 accounts and partner customer accounts remain separate.

Receive a design safely

Check the exact origin, iframe window, partner ID and message type. Test messages are deliberately different from production messages. This example detects completion; it does not create an order.

const frame = document.getElementById("cr80-editor");
const partnerId = "YOUR_PARTNER_ID";
window.addEventListener("message", (event) => {
  if (event.origin !== "https://cr80.se") return;
  if (event.source !== frame.contentWindow) return;
  const message = event.data;
  if (!message || message.partner !== partnerId) return;
  if (message.type === "cr80-test-design" && message.test === true) {
    // Display a test result. Never submit to your order or print queue.
    document.getElementById("result").textContent = "Test design received";
    return;
  }
  if (message.type !== "cr80-design" || message.test !== false) return;
  // Production integration: authenticate the customer on YOUR server,
  // validate the versioned design and SKU, calculate your own price,
  // and require explicit order confirmation. A message is not an order.
});

Create a result element on your page: <p id="result" role="status"></p>. Add application-specific error handling and server validation before using this as a checkout integration. Treat all browser payloads as untrusted.

APIs and the design contract

Designs are versioned JSON. Keep the version and full document when saving a design. Geometry is in millimetres; money is integer öre. A selected SKU controls material, technology and permitted finishing. Do not strip unknown fields or implement a second rendering engine.

A design may contain personal data, photos and data rows. Use authenticated storage, ownership checks and an appropriate retention policy. Request a production render from CR80 instead of printing a screenshot of the editor.

Signed launches, managed customer identities, production rendering and SPI require scoped server credentials and a reviewed data flow. They are separate from this browser-only quick start. Ask CR80 to enable the required contract for your integration; a public partner ID is never an API credential.