Embedded Checkout Widget

Drop a stablecoin checkout modal into your existing React application. The customer pays without ever leaving your site, and the payment runs through the same regulated backend as our hosted checkout.

Who this is for

Not a fit if your application is not React-based (use the hosted checkout or the direct API instead — see Accept crypto payments), or if bundle size is a hard constraint and you cannot accept the SDK weight that comes with shipping every chain’s wallet adapter.

What you can ship today

A React SDK that renders the payment modal inline. The merchant wraps the application in our provider, calls a single hook to open the modal, and receives ready-made loading, success, and error states for the checkout flow.

The backend, the payment-intent lifecycle, the status enum, and the webhook payload are identical to the hosted checkout — only the merchant-side React setup differs.

How it works

1. Wrap your app in <KryptogoKitProvider> once, alongside the
   wagmi and react-query providers.

2. Anywhere in your component tree, call usePayment() and
   invoke openPaymentModal({ fiat_amount, fiat_currency,
   callback_url, order_data, ... }).

3. The SDK renders the modal in your page. The customer connects
   their wallet, signs the on-chain transfer, and sees the result.

4. Your backend receives the same HMAC-signed callback as the
   hosted checkout. usePayment() also exposes isLoading,
   isSuccess, isError, and error so your UI can react without
   waiting for the callback.

Sample setup

import {
  KryptogoKitProvider,
  getDefaultConfig,
  lightTheme,
} from '@kryptogo/kryptogokit-sdk-react';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { arbitrum } from 'wagmi/chains';
 
const config = getDefaultConfig({
  appName: 'My Merchant App',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  chains: [arbitrum],
});
 
const queryClient = new QueryClient();
 
export function KryptogoProvider({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <KryptogoKitProvider theme={lightTheme()}>
          {children}
        </KryptogoKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Sample checkout button

import { usePayment } from '@kryptogo/kryptogokit-sdk-react';
 
export function CheckoutButton({ orderId, amount }) {
  const { openPaymentModal, isLoading, isSuccess } = usePayment();
 
  return (
    <button
      disabled={isLoading}
      onClick={() =>
        openPaymentModal({
          fiat_amount: amount,
          fiat_currency: 'TWD',
          callback_url: `https://your-server.com/payment/callback?order=${orderId}`,
          order_data: { orderId },
          group_key: 'checkout_v2',
        })
      }
    >
      {isSuccess ? 'Paid' : 'Pay with Crypto'}
    </button>
  );
}

Custody model

Settlement flows through the same custody path as the hosted checkout: funds land in your KryptoGO-managed receive address. See Custody Options for the full breakdown of how custody works across our products.

Compliance posture

The embedded widget inherits the same compliance posture as every other payment surface — Taiwan VASP, ISO 27001 and ISO 27701, SOC 2 Type II, Cure53, inline AML risk scoring on every payment. Full detail at Compliance & Certifications.

Chains and tokens supported today

The SDK’s published quick-start documentation focuses on Arbitrum; additional chains can be enabled per integration. Confirm coverage with our partnerships team during scoping.

Typical integration timeline

Bucketed by the framework in Integration Timeline Framework.

Current scope

• The React SDK is published on NPM and used in production by external integrators and our own properties.
• HMAC-SHA256-signed callbacks with a five-minute timestamp window protect against replay attacks on the payment intent.
• Theming presets cover light, dark, and midnight; deeper customisation is available via a CSS-string override path.
• The SDK requires React 18 or newer and peer dependencies on wagmi, @tanstack/react-query, viem, and (for Tron) tronweb.
• Per-chain bundle splitting is on the roadmap; today the SDK ships every supported chain’s wallet adapter.

Talk to us

If you want a brand-consistent in-page checkout and you are already on React, reach our partnerships team via the address on www.kryptogo.tw . We will help you confirm chain coverage, scope theming, and walk through the SDK end-to-end.

Where to go next

• Accept crypto payments — for the broader picture and the hosted-checkout alternative.
• Invoice approval workflow — when the checkout needs to fit into an invoice-and-approval flow.
• Architecture Overview — to see how the SDK fits into the wider platform.
• Solutions: Consumer Fintech Bolt-On — for a worked example of embedding crypto into an existing app.