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

# Sell access with one gate

> Publish a free or paid access rule, add one component, and confirm the result on your server.

One listing holds the checks, the price, and hosted sign-in. Your app adds the listing and confirms the result. It never rebuilds the check, and visitors never need an API key.

## Build it

<Steps>
  <Step title="Publish a listing">
    Sign in at [proofable.me](https://proofable.me) and [create a listing](https://proofable.me/profile/portals/new). Choose what to verify, set a price or keep it free, and publish. Copy your `gateId`. Listed offers also appear on the [marketplace](https://proofable.me/marketplace).
  </Step>

  <Step title="Add VerifyGate">
    ```jsx theme={"system"}
    import { VerifyGate } from '@proofable/sdk/widgets';

    <VerifyGate gateId="gate_your-app-name">
      <ProtectedContent />
    </VerifyGate>;
    ```

    `VerifyGate` reuses a saved proof, or opens hosted sign-in on Proofable when a new one is needed. Wallet, passkey, and OAuth steps all happen on Proofable, not inside your app.
  </Step>

  <Step title="Confirm on your server">
    Pass the visitor's account address from Proofable sign-in or the saved result:

    ```js theme={"system"}
    import { ProofableClient } from '@proofable/sdk';

    const client = new ProofableClient();
    const result = await client.gateCheck({
      gateId: 'gate_your-app-name',
      address: user.accountAddress,
    });

    if (!result.data?.gate?.allRequiredSatisfied) {
      // Send the visitor back to VerifyGate or Proofable sign-in
    }
    ```
  </Step>
</Steps>

The visitor's proof is theirs. When they return, or reach another listing that needs the same checks, they reuse it.

You choose who pays. Your credits cover free access, or turn on visitor checkout and set a price. [Pricing](/pricing) covers card, USDC, and pay-per-call options.

## Show proof status

```jsx theme={"system"}
import { ProofBadge } from '@proofable/sdk/widgets';

<ProofBadge qHash={proof.qHash} />;
```

Pass `showChains` only when onchain status matters in your interface.

## Not using React

Send visitors to Proofable instead:

```js theme={"system"}
import { getHostedCheckoutUrl } from '@proofable/sdk';

window.location.assign(
  getHostedCheckoutUrl({
    gateId: 'gate_your-app-name',
    returnUrl: 'https://app.example.com/auth/callback',
  }),
);
```

Read the proof ID (`qHash`) from the callback URL or popup message, then store it. [Hosted verification](/verification/hosted)

## Next

<CardGroup cols={2}>
  <Card title="VerifyGate" icon="square-check" href="/widgets/verifygate">
    Props, strategies, and hosted OAuth.
  </Card>

  <Card title="Gate checkout" icon="door-open" href="/gates/checkout">
    The full checkout contract.
  </Card>

  <Card title="Server integrations" icon="server" href="/integrations/server">
    Create proofs from your backend.
  </Card>

  <Card title="Gates" icon="door-closed" href="/gates">
    Everything a gate can hold and enforce.
  </Card>
</CardGroup>