Credit Card Payments

Varity Team Core Contributors Updated March 2026

Credit Card Payments

Let users pay for your app using credit cards, Apple Pay, or Google Pay through the Varity App Store.

How It Works

User finds your app in the Varity App Store
User clicks “Purchase” or “Subscribe”
Secure checkout opens with familiar payment options
Payment is processed automatically
Revenue is split 90/10 (you keep 90%)

Users never need special accounts or knowledge. They just pay with their card.

Setting Up Pricing

Configure your app pricing in the Developer Portal:

Pricing Model	Description
Free	No charge. Great for building an audience.
One-time	Single purchase. User gets lifetime access.
Subscription	Monthly recurring payment.

In-App Payments (Post-Beta)

Once credit card payments are available, add payment components directly in your app:

import { PaymentWidget } from '@varity-labs/ui-kit';
import { useAuth } from '@varity-labs/ui-kit';

export function UpgradeButton() {
  const { user } = useAuth();

  if (!user) {
    return <p>Please log in to upgrade</p>;
  }

  return (
    <PaymentWidget
      appId={123}
      price={5000}
      onSuccess={(txHash) => {
        console.log('Upgrade complete!', txHash);
      }}
      onError={(err) => console.error('Payment failed:', err)}
    >
      <button>Upgrade to Pro - $50.00</button>
    </PaymentWidget>
  );
}

Full Checkout Page (Post-Beta)

For a complete payment experience:

import { PaymentGate } from '@varity-labs/ui-kit';
import { useAuth } from '@varity-labs/ui-kit';
import { useRouter } from 'next/navigation';

export default function CheckoutPage() {
  const { user, authenticated } = useAuth();
  const router = useRouter();

  if (!authenticated) {
    router.push('/login');
    return null;
  }

  return (
    <div className="max-w-md mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Upgrade Your Plan</h1>

      <PaymentGate
        appId={123}
        price={10000}
        fallback={
          <div>
            <p>Upgrade to Business for $100.00/month</p>
            <p>Get access to premium features.</p>
          </div>
        }
      >
        <div>
          <h2>Welcome, Business member!</h2>
          <p>You have full access to all premium features.</p>
        </div>
      </PaymentGate>
    </div>
  );
}

Payment Methods (Post-Beta)

Method	Availability
Credit/Debit Card	All users
Apple Pay	iOS/macOS users
Google Pay	Android/Chrome users

Revenue Split

When users purchase your app:

90% goes to you (the developer)
10% goes to the Varity platform

Revenue is tracked in the Developer Portal.

Next Steps

Free Operations - Users never pay usage fees
Authentication Quick Start - Set up user accounts