> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getruba.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Map Ruba Events to Application Decisions

> Subscribe to the smallest set of state changes your application can act on

export const RubaSocials = () => {
  if (typeof document === "undefined") {
    return null;
  }
  const inject = () => {
    const footer = document.getElementById("footer");
    if (!footer || document.getElementById("ruba-socials")) {
      return false;
    }
    const isDark = document.querySelector("html.dark") || document.querySelector('html[class*="dark"]');
    const lineColor = isDark ? "#383838" : "#e8e8ed";
    const iconColor = isDark ? "#8e8e93" : "#86868b";
    const markColor = isDark ? "#ffffff" : "#08080c";
    const hoverColor = "#0071e3";
    const div = document.createElement("div");
    div.id = "ruba-socials";
    div.style.cssText = `display:flex;align-items:center;gap:20px;padding-top:20px;margin-top:20px;border-top:1px solid ${lineColor};width:100%`;
    const logo = `<a href="https://getruba.com" style="display:inline-flex;height:24px;align-items:center;gap:8px;text-decoration:none;color:${markColor};line-height:1;"><svg width="24" height="24" viewBox="0 0 120 120" aria-hidden="true" style="display:block;flex:none;"><g transform="translate(2.5 0)"><path d="M19 25h59L65.43 47H19a4 4 0 0 1-4-4V29a4 4 0 0 1 4-4Z" fill="${markColor}"/><path d="M19 73h31.57L38 95H19a4 4 0 0 1-4-4V77a4 4 0 0 1 4-4Z" fill="${markColor}"/><path d="M85 25h25L70 95H45Z" fill="#007AFF"/></g></svg><span style="display:inline-flex;height:24px;align-items:center;font-weight:600;font-size:15px;color:${markColor};letter-spacing:-0.01em;line-height:1;">Ruba</span></a>`;
    const spacer = `<div style="flex:1"></div>`;
    const ig = `<a href="https://instagram.com/getruba" target="_blank" rel="noopener" aria-label="Instagram" style="display:flex;align-items:center;color:${iconColor};transition:color 0.15s ease;" onmouseover="this.style.color='${hoverColor}'" onmouseout="this.style.color='${iconColor}'"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>`;
    const li = `<a href="https://linkedin.com/company/getruba" target="_blank" rel="noopener" aria-label="LinkedIn" style="display:flex;align-items:center;color:${iconColor};transition:color 0.15s ease;" onmouseover="this.style.color='${hoverColor}'" onmouseout="this.style.color='${iconColor}'"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>`;
    const x = `<a href="https://x.com/getruba" target="_blank" rel="noopener" aria-label="X" style="display:flex;align-items:center;color:${iconColor};transition:color 0.15s ease;" onmouseover="this.style.color='${hoverColor}'" onmouseout="this.style.color='${iconColor}'"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>`;
    const github = `<a href="https://github.com/rubadot" target="_blank" rel="noopener" aria-label="GitHub" style="display:flex;align-items:center;color:${iconColor};transition:color 0.15s ease;" onmouseover="this.style.color='${hoverColor}'" onmouseout="this.style.color='${iconColor}'"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .7a11.5 11.5 0 0 0-3.64 22.4c.58.1.79-.25.79-.56v-2.24c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.78 1.2 1.78 1.2 1.04 1.77 2.72 1.26 3.38.96.1-.75.4-1.26.74-1.55-2.57-.3-5.27-1.29-5.27-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.47.11-3.05 0 0 .97-.31 3.16 1.18A10.96 10.96 0 0 1 12 6.09c.98 0 1.94.13 2.86.39 2.2-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.28 5.68.42.36.79 1.06.79 2.14v3.28c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z"/></svg></a>`;
    div.innerHTML = logo + spacer + ig + li + x + github;
    footer.appendChild(div);
    return true;
  };
  if (!document.documentElement.dataset.rubaSocialsObserver) {
    document.documentElement.dataset.rubaSocialsObserver = "true";
    const observer = new MutationObserver(() => {
      if (!document.getElementById("ruba-socials")) {
        inject();
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }
  setTimeout(() => {
    if (!inject()) {
      const interval = setInterval(() => {
        if (inject()) {
          clearInterval(interval);
        }
      }, 500);
      setTimeout(() => clearInterval(interval), 10000);
    }
  }, 300);
  return null;
};

<link rel="stylesheet" href="/style.css" />

<RubaSocials />

Webhook names are grouped by the record that changed. Prefer outcome events such as `order.paid` for fulfillment, and use broad `updated` events only when the application genuinely needs every mutation.

## Customer and revenue lifecycle

### Before payment: checkout

<Columns cols={2}>
  <Card title="checkout.created" icon="chain" href="/api-reference/webhooks/checkout.created" horizontal />

  <Card title="checkout.updated" icon="chain" href="/api-reference/webhooks/checkout.updated" horizontal />

  <Card title="checkout.expired" icon="chain" href="/api-reference/webhooks/checkout.expired" horizontal>
    A session reached expiry without completing.
  </Card>
</Columns>

### Customer identity and access snapshot

<Columns cols={2}>
  <Card title="customer.created" icon="chain" href="/api-reference/webhooks/customer.created" horizontal>
    A customer record now exists.
  </Card>

  <Card title="customer.updated" icon="chain" href="/api-reference/webhooks/customer.updated" horizontal>
    Stored customer details changed.
  </Card>

  <Card title="customer.deleted" icon="chain" href="/api-reference/webhooks/customer.deleted" horizontal>
    The customer record was removed.
  </Card>

  <Card title="customer.state_changed" icon="chain" href="/api-reference/webhooks/customer.state_changed" horizontal>
    The combined access snapshot changed, including subscriptions or benefit grants.
  </Card>
</Columns>

### Recurring relationship

<Columns cols={2}>
  <Card title="subscription.created" icon="chain" href="/api-reference/webhooks/subscription.created" horizontal>
    A recurring relationship was created; this alone does not prove collection.
  </Card>

  <Card title="subscription.active" icon="chain" href="/api-reference/webhooks/subscription.active" horizontal />

  <Card title="subscription.uncanceled" icon="chain" href="/api-reference/webhooks/subscription.uncanceled" horizontal />

  <Card title="subscription.canceled" icon="chain" href="/api-reference/webhooks/subscription.canceled" horizontal />

  <Card title="subscription.past_due" icon="chain" href="/api-reference/webhooks/subscription.past_due" horizontal>
    Collection failed and the customer may recover by replacing the payment method.
  </Card>

  <Card title="subscription.updated" icon="chain" href="/api-reference/webhooks/subscription.updated" horizontal>
    Catch-all mutation signal also emitted around active, canceled, uncanceled, past-due, and revoked transitions.
  </Card>

  <Card title="order.created" icon="chain" href="/api-reference/webhooks/order.created" horizontal>
    Inspect `billing_reason` to distinguish `purchase`, `subscription_create`, `subscription_cycle`, and `subscription_update`. A renewal uses `subscription_cycle`.
  </Card>

  <Card title="subscription.revoked" icon="chain" href="/api-reference/webhooks/subscription.revoked" horizontal />
</Columns>

#### Cancellation timelines

The default cancellation schedules the end of access at period end. Immediately after the customer or merchant requests it, Ruba emits:

1. `subscription.updated`
2. `subscription.canceled`

Both payloads show `active` with `cancel_at_period_end: true`. At period end, billing stops, benefits are removed, and Ruba emits:

3. `subscription.updated`
4. `subscription.revoked`

Those payloads show `canceled`. With immediate merchant revocation, the complete transition arrives together:

1. `subscription.updated`
2. `subscription.canceled`
3. `subscription.revoked`

All three payloads describe the now-canceled subscription.

#### Renewal timeline

At the renewal boundary, enabled endpoints first receive:

1. `subscription.updated`
2. `order.created`

The subscription carries its new `current_period_start` and `current_period_end`. The pending order contains the upcoming-cycle amount plus any prior-period usage. After successful collection, Ruba emits:

3. `order.updated`
4. `order.paid`

Both contain the order in `paid` state. Fulfillment should normally key off `order.paid`, not the earlier pending record.

### Collected transaction

<Columns cols={2}>
  <Card title="order.created" icon="chain" href="/api-reference/webhooks/order.created" horizontal />

  <Card title="order.paid" icon="chain" href="/api-reference/webhooks/order.paid" horizontal />

  <Card title="order.updated" icon="chain" href="/api-reference/webhooks/order.updated" horizontal />

  <Card title="order.refunded" icon="chain" href="/api-reference/webhooks/order.refunded" horizontal />
</Columns>

### Returned money

<Columns cols={2}>
  <Card title="refund.created" icon="chain" href="/api-reference/webhooks/refund.created" horizontal />

  <Card title="refund.updated" icon="chain" href="/api-reference/webhooks/refund.updated" horizontal />
</Columns>

### Customer entitlement

<Columns cols={2}>
  <Card title="benefit_grant.created" icon="chain" href="/api-reference/webhooks/benefit_grant.created" horizontal />

  <Card title="benefit_grant.updated" icon="chain" href="/api-reference/webhooks/benefit_grant.updated" horizontal />

  <Card title="benefit_grant.revoked" icon="chain" href="/api-reference/webhooks/benefit_grant.revoked" horizontal />
</Columns>

## Configuration lifecycle

### Benefit definitions

<Columns cols={2}>
  <Card title="benefit.created" icon="chain" href="/api-reference/webhooks/benefit.created" horizontal />

  <Card title="benefit.updated" icon="chain" href="/api-reference/webhooks/benefit.updated" horizontal />
</Columns>

### Product catalog

<Columns cols={2}>
  <Card title="product.created" icon="chain" href="/api-reference/webhooks/product.created" horizontal />

  <Card title="product.updated" icon="chain" href="/api-reference/webhooks/product.updated" horizontal />
</Columns>

### Organization settings

<Columns cols={2}>
  <Card title="organization.updated" icon="chain" href="/api-reference/webhooks/organization.updated" horizontal />
</Columns>
