Getting started

Quickstart

From nothing to a paying test subscriber on devnet: publish a plan, put the widget on a page, subscribe to it yourself, and have your server confirm it. About ten minutes.

Before you start

Everything here happens on devnet, with test tokens.

A Solana wallet such as Phantom or Solflare, set to devnet.
Devnet SOL for fees, from faucet.solana.com.
Devnet USDC to subscribe with, from Circle's faucet. It is only needed for step 4.

Publish a plan

Step 1: Sign in to the dashboard

Open the dashboard and choose Connect wallet. Your wallet asks you to sign a message proving you own it. That is a signature, not a transaction: it costs nothing.

Step 2: Create the plan

Go to Plans, then Create plan. Give it a name, the amount you want to receive, and how often. The form shows what the customer pays and the 1% fee as you type.

Publish asks your wallet to sign a transaction that writes the plan on-chain, with your wallet as the destination. Once it confirms, the plan has an id like plan_8xK2m.

Step 3: Put the widget on a page

The plan's page in the dashboard has an Embed section with this snippet, filled in with your plan id. Paste it into any HTML page.

embed snippet

<script src="https://cdn.solloop.app/widget.js" defer></script>
<solloop-subscribe plan="plan_8xK2m" theme="light"></solloop-subscribe>

Using React? Embed the widget has the component, and every attribute.

Step 4: Take a test subscription

Open the page and choose Connect wallet in the widget. A second wallet makes it clearest, but your own works. The widget shows the amount, the period and where the money goes, read from the chain at that moment. Approve it, and one signature sets up the subscription.

The subscriber appears under Subscribers in the dashboard within seconds. The first period's payment is due at once, and the collector takes it on its next run, usually within a minute; it then shows under Payouts.

Grant access on your server

Step 5: Confirm it from your server

The widget tells your page when someone has subscribed, but anyone can fake an event in a browser. So the page sends the wallet address to your server, and your server asks SolLoop.

in the page

const widget = document.querySelector('solloop-subscribe');

widget.addEventListener('solloop:connected', (event) => {
  // The customer's wallet address. Keep it: your server checks it next.
  wallet = event.detail.address;
});

widget.addEventListener('solloop:subscribed', async () => {
  // A hint for your UI, not proof of payment. Ask your server to check.
  await fetch('/api/solloop/claim', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ wallet }),
  });
});

Create an API key under Developers in the dashboard. Keys start sk_test_ on devnet. Then check the wallet:

on your server

// On your server. SOLLOOP_API_KEY is an sk_test_ or sk_live_ key: never
// send it to a browser.
export async function hasAccess(wallet, planId) {
  const response = await fetch(
    `https://api.solloop.app/v1/subscribers/${wallet}`,
    { headers: { Authorization: `Bearer ${process.env.SOLLOOP_API_KEY}` } },
  );
  if (response.status === 404) return false;
  if (!response.ok) throw new Error(`SolLoop API answered ${response.status}`);

  const subscriber = await response.json();
  // "cancelling" has cancelled but paid through the end of the period.
  return (
    subscriber.planId === planId &&
    (subscriber.status === 'active' || subscriber.status === 'cancelling')
  );
}

When hasAccess returns true, store the wallet against your user and unlock what they paid for.

Next steps

Webhooks tell your server about every renewal and failed payment, so access follows payment without polling.
Grant access covers cancellations and what each subscription status means.
How it works explains periods, fees and failed payments.