2-Minute Implementation

Quickstart Guide

Deploy Revora retention flows into production in under two minutes. Revora intercepts cancellation button clicks, renders in an isolated Shadow DOM, and executes Stripe mutations automatically.

Obtain Your Public Integration Key

pk_live_revora_0123456789abcdef0123456789abcdef

For local development and staging testing, use your test key starting with pk_test_revora_....

Embed the Revora Script Tag

Paste the Revora widget loader script into your HTML before the closing </head> or </body> tag on your subscription or account management page:

index.html

<script
  src="https://revorahq.vercel.app/revora-widget.js"
  data-revora-key="pk_live_revora_YOUR_KEY_HERE"
  defer
></script>

The script weighs under 2KB gzipped, executes asynchronously without blocking DOM rendering, and isolates the entire UI inside a Shadow DOM.

Tag Your Existing “Cancel Subscription” Button

Locate your existing button in your template and add data-revora-cancel with the customer's Stripe identifiers:

BillingSettings.html

<button
  data-revora-cancel
  data-customer-id="{{customer.stripe_id}}"
  data-subscription-id="{{subscription.stripe_id}}"
  data-plan-value="4900"
  data-currency="usd"
>
  Cancel Subscription
</button>

Supported HTML Data Attributes:

data-revora-cancel: Identifies the button for click interception.
data-customer-id: The Stripe Customer ID (cus_...).
data-subscription-id: The Stripe Subscription ID (sub_...).
data-plan-value: Plan cost in cents (e.g. 4900 for $49.00/mo).
data-currency: Currency code (default: usd).

Framework Examples

React / Next.js Component:

CancelButton.tsx

export function CancelSubscriptionButton({ customerId, subscriptionId }: {
  customerId: string;
  subscriptionId: string;
}) {
  return (
    <button
      data-revora-cancel
      data-customer-id={customerId}
      data-subscription-id={subscriptionId}
      className="text-sm font-semibold text-rose-600 hover:underline"
    >
      Cancel Subscription
    </button>
  );
}

Programmatic JavaScript API trigger:

custom-handler.js

window.Revora.open({
  customer: {
    id: "cus_123456789",
    subscriptionId: "sub_123456789",
    planValue: 4900,
    currency: "usd"
  },
  onComplete: (result) => {
    if (result.retained) {
      console.log("Customer saved via offer:", result.action);
    } else {
      console.log("Cancellation continued");
    }
  }
});

Verify in Your Dashboard

Click the Cancel button on your page. The Revora modal will open over your application. Complete the flow and immediately check your Recovery Matrix to verify that the session and retained plan value were recorded in your database ledger.