Subscription SDK UI

yarn add @sigworld/sdk-ui @sigworld/sdk ethers react react-dom

import { useState } from 'react';
import { SixpaySubscriptionModal } from '@sigworld/sdk-ui';

export function SubscribeButton() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Start subscription
      </button>
      <SixpaySubscriptionModal
        open={open}
        onClose={() => setOpen(false)}
        subscriptionProductId="subprod_..."
        onComplete={(result) => {
          // This means the wallet transaction was submitted. Do not grant access here.
          console.info('Subscription transaction submitted', result);
        }}
        onError={(error) => console.error('Subscription checkout failed', error)}
      />
    </>
  );
}

// Merchant server only
import { SigWorldSDK } from '@sigworld/sdk';

const sdk = new SigWorldSDK({
  platformEndpointURL: 'https://api.sixpay.xyz',
  merchantApiKey: process.env.SIXPAY_MERCHANT_API_KEY!,
});

const session = await sdk.subscription.createCheckoutSession({
  tenantId: process.env.SIXPAY_TENANT_ID!,
  subscriptionProductId: 'subprod_...',
  merchantSubscriptionOrderId: order.id,
  customerReference: customer.id,
});

return {
  id: session.id,
  checkoutToken: session.checkoutToken,
  expiresAt: session.expiresAt,
};

<SixpaySubscriptionModal
  open={open}
  onClose={() => setOpen(false)}
  subscriptionSessionId={session.id}
  subscriptionToken={session.checkoutToken!}
  onComplete={(result) => console.info('Subscription transaction submitted', result)}
/>

import { PrivyProvider } from '@privy-io/react-auth';
import { SixpaySubscriptionModal } from '@sigworld/sdk-ui';
import { usePrivyWallet } from '@sigworld/sixpay-wallet';

function SubscriptionCheckout() {
  const walletAdapter = usePrivyWallet();
  return (
    <SixpaySubscriptionModal
      open={true}
      subscriptionProductId="subprod_..."
      walletAdapter={walletAdapter}
    />
  );
}

export function App() {
  return (
    <PrivyProvider appId="your-privy-app-id" clientId="your-privy-client-id">
      <SubscriptionCheckout />
    </PrivyProvider>
  );
}