@clockpay/react-native 1.0.0 → 1.0.1

package/lib/typescript/components/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/icons.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0BAA0B;AAC1B,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAahD;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,+BAiBpE;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,+BAmBnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAWhD;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAajD"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/icons.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0BAA0B;AAC1B,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAahD;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,+BAiBpE;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,+BAmBnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAWhD;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,+BAY1E;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,EAAE,SAAS,+BAajD"}

package/lib/typescript/components/payment-button.d.ts

@@ -1,7 +1,8 @@
 import type { PaymentButtonProps } from '../types';
 /**
  * Drop-in payment button for React Native. Renders a "Pay with Clockpay" trigger
- * that initiates a checkout and opens a Stripe-style bottom-sheet payment modal.
+ * that opens a coin/network selection sheet, generates a payment link, then opens
+ * a Stripe-style bottom-sheet payment modal.
  */
-export declare function PaymentButton({ publicKey, clientSecret, appearance, label, disabled, apiBaseUrl, redirectUrl, onSuccess, onError, onClose, }: PaymentButtonProps): import("react").JSX.Element;
+export declare function PaymentButton({ publicKey, amount, currency, reference, meta, appearance, label, disabled, apiBaseUrl, redirectUrl, onSuccess, onError, onClose, }: PaymentButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=payment-button.d.ts.map

package/lib/typescript/components/payment-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"payment-button.d.ts","sourceRoot":"","sources":["../../../src/components/payment-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMjE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,KAA2B,EAC3B,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,OAAO,GACR,EAAE,kBAAkB,+BA2EpB"}
+{"version":3,"file":"payment-button.d.ts","sourceRoot":"","sources":["../../../src/components/payment-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMjE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EACV,KAA2B,EAC3B,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,OAAO,GACR,EAAE,kBAAkB,+BAuFpB"}

package/lib/typescript/components/selection-sheet.d.ts

@@ -0,0 +1,25 @@
+import type { CheckoutCurrency, CheckoutData, CheckoutMeta } from '../types';
+import type { ResolvedTheme } from '../internal/theme';
+interface SelectionSheetProps {
+    visible: boolean;
+    publicKey: string;
+    apiBaseUrl?: string;
+    theme: ResolvedTheme;
+    amount: number;
+    currency: CheckoutCurrency;
+    reference: string;
+    meta: CheckoutMeta;
+    onRequestClose: () => void;
+    onClosed: () => void;
+    onProceed: (checkout: CheckoutData) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * First step of the payment flow: the buyer picks a coin and then a settlement
+ * network. On continue, a payment link is generated (`create-link`) and the
+ * resulting checkout initiated, handing a {@link CheckoutData} to the caller so
+ * the payment sheet can open.
+ */
+export declare function SelectionSheet({ visible, publicKey, apiBaseUrl, theme, amount, currency, reference, meta, onRequestClose, onClosed, onProceed, onError, }: SelectionSheetProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=selection-sheet.d.ts.map

package/lib/typescript/components/selection-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/selection-sheet.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EAGb,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgBvD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAqFD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,mBAAmB,+BA2JrB"}

package/lib/typescript/index.d.ts

@@ -1,3 +1,3 @@
 export { PaymentButton } from './components/payment-button';
-export type { PaymentButtonProps, ClockPayAppearance, ClockPayEnvironment, CheckoutData, CheckoutResponse, VerifyCryptoPayload, VerifyCryptoResponse, } from './types';
+export type { PaymentButtonProps, ClockPayAppearance, ClockPayEnvironment, CheckoutCurrency, CheckoutMeta, CheckoutPhoneNumber, CheckoutData, CheckoutResponse, Coin, CoinsResponse, Network, NetworksResponse, CreateLinkPayload, CreateLinkData, CreateLinkResponse, VerifyCryptoPayload, VerifyCryptoResponse, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/lib/typescript/internal/format.d.ts

@@ -1,5 +1,7 @@
 /** Formats a number of seconds as `MM:SS`. */
 export declare function formatTime(totalSeconds: number): string;
+/** Formats a fiat amount with its currency symbol, e.g. `formatMoney(20000, 'ngn')` → `₦20,000`. */
+export declare function formatMoney(amount: number, currency: string): string;
 /** Resolves the on-chain code used to verify a transaction for a given checkout. */
 export declare function resolveNetworkCode(network?: string, fallback?: string): string;
 /** Truncates a long address for compact display: `0x1234…abcd`. */

package/lib/typescript/internal/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/internal/format.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAKvD;AAED,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAG9E;AAED,mEAAmE;AACnE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAK,EAAE,IAAI,SAAI,GAAG,MAAM,CAGzE"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/internal/format.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAKvD;AAID,oGAAoG;AACpG,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGpE;AAED,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAG9E;AAED,mEAAmE;AACnE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAK,EAAE,IAAI,SAAI,GAAG,MAAM,CAGzE"}

package/lib/typescript/types.d.ts

@@ -19,6 +19,63 @@ export interface ClockPayAppearance {
 }
 /** The environment a public key belongs to. */
 export type ClockPayEnvironment = 'test' | 'live';
+/** Fiat currency the order amount is denominated in. */
+export type CheckoutCurrency = 'ngn' | 'usd';
+/** A coin the buyer can pay with, from `GET /wallet/checkout/coins`. */
+export interface Coin {
+    id: string;
+    name: string;
+    image: string;
+    code: string;
+}
+/** A settlement network for a coin, from `GET /wallet/checkout/networks/{coinId}`. */
+export interface Network {
+    id: string;
+    tag: string;
+    code: string;
+    name: string;
+}
+export interface CoinsResponse {
+    data: Coin[];
+}
+export interface NetworksResponse {
+    data: Network[];
+}
+/** Buyer's phone number, split into dialling code and local number. */
+export interface CheckoutPhoneNumber {
+    code: string;
+    number: string;
+}
+/** Order/buyer details the business provides for the payment link. */
+export interface CheckoutMeta {
+    title: string;
+    description: string;
+    /** Buyer email. Optional. */
+    email?: string;
+    /** Business's own id for the buyer. Optional. */
+    customerId?: string;
+    fullName: string;
+    /** Buyer phone number. Optional. */
+    phoneNumber?: CheckoutPhoneNumber;
+}
+/** Body for `POST /payment/client/create-link`. */
+export interface CreateLinkPayload {
+    amount: number;
+    currency: CheckoutCurrency;
+    coinId: string;
+    networkId: string;
+    reference: string;
+    meta: CheckoutMeta;
+}
+/** The generated payment link — its reference and single-use client secret. */
+export interface CreateLinkData {
+    reference: string;
+    clientSecret: string;
+}
+export interface CreateLinkResponse {
+    message: string;
+    data: CreateLinkData;
+}
 /** Payload returned by the checkout endpoint and rendered inside the sheet. */
 export interface CheckoutData {
     reference: string;
@@ -45,8 +102,14 @@ export interface VerifyCryptoResponse {
 export interface PaymentButtonProps {
     /** Public key from the business developer dashboard (e.g. `cpay_test_pk_...`). Required. */
     publicKey: string;
-    /** Client secret returned from your server-side checkout call. Required. */
-    clientSecret: string;
+    /** Order amount in the given `currency`. Required. */
+    amount: number;
+    /** Fiat currency of the `amount`. Required. */
+    currency: CheckoutCurrency;
+    /** Your own reference for this order. Required. */
+    reference: string;
+    /** Order and buyer details. The business supplies these; the buyer only picks a coin & network. Required. */
+    meta: CheckoutMeta;
     /** Visual customization for the button and sheet. */
     appearance?: ClockPayAppearance;
     /** Button label. Defaults to "Pay with Clockpay". */

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,+CAA+C;AAC/C,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,4DAA4D;AAC5D,MAAM,WAAW,kBAAkB;IACjC,4FAA4F;IAC5F,SAAS,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,YAAY,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clockpay/react-native",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.",
   "license": "MIT",
   "author": "ClockPay",

package/src/api/client.ts

@@ -3,6 +3,13 @@ import { endpoints } from './endpoints';
 import { resolveApiBaseUrl } from '../internal/constants';
 import type {
   CheckoutResponse,
+  Coin,
+  CoinsResponse,
+  CreateLinkData,
+  CreateLinkPayload,
+  CreateLinkResponse,
+  Network,
+  NetworksResponse,
   VerifyCryptoPayload,
   VerifyCryptoResponse,
 } from '../types';
@@ -43,6 +50,44 @@ export class ClockPayClient {
     });
   }
 
+  /** Lists the coins a buyer can pay with. */
+  async getCoins(): Promise<Coin[]> {
+    try {
+      const { data } = await this.http.get<CoinsResponse>(endpoints.coins);
+      return data.data;
+    } catch (error) {
+      throw toError(error, 'Failed to load coins.');
+    }
+  }
+
+  /** Lists the settlement networks available for a given coin. */
+  async getNetworks(coinId: string): Promise<Network[]> {
+    if (!coinId) {
+      throw new Error('ClockPay: a coinId is required.');
+    }
+    try {
+      const { data } = await this.http.get<NetworksResponse>(
+        `${endpoints.networks}/${coinId}`
+      );
+      return data.data;
+    } catch (error) {
+      throw toError(error, 'Failed to load networks.');
+    }
+  }
+
+  /** Generates a payment link, returning its reference and client secret. */
+  async createLink(payload: CreateLinkPayload): Promise<CreateLinkData> {
+    try {
+      const { data } = await this.http.post<CreateLinkResponse>(
+        endpoints.createLink,
+        payload
+      );
+      return data.data;
+    } catch (error) {
+      throw toError(error, 'Failed to create payment link.');
+    }
+  }
+
   /** Initiates a checkout for the given client secret. */
   async initiatePayment(clientSecret: string): Promise<CheckoutResponse> {
     if (!clientSecret) {

package/src/api/endpoints.ts

@@ -1,4 +1,7 @@
 export const endpoints = Object.freeze({
+  coins: '/wallet/client/checkout/coins',
+  networks: '/wallet/client/checkout/networks',
+  createLink: '/payment/client/create-link',
   initiatePayment: '/payment/client/checkout',
   verifyCrypto: '/transactions/verify-crypto',
 });

package/src/components/icons.tsx

@@ -74,6 +74,20 @@ export function InfoIcon({ size = 16 }: IconProps) {
   );
 }
 
+export function ChevronDownIcon({ size = 20, color = '#94a3b8' }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
+      <Path
+        d='M6 9L12 15L18 9'
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+}
+
 export function CheckIcon({ size = 48 }: IconProps) {
   return (
     <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>

package/src/components/payment-button.tsx

@@ -1,18 +1,22 @@
-import { useMemo, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { CheckoutData, PaymentButtonProps } from '../types';
-import { ClockPayClient } from '../api/client';
 import { resolveTheme } from '../internal/theme';
+import { SelectionSheet } from './selection-sheet';
 import { PaymentSheet } from './payment-sheet';
 import { LogoIcon } from './icons';
 
 /**
  * Drop-in payment button for React Native. Renders a "Pay with Clockpay" trigger
- * that initiates a checkout and opens a Stripe-style bottom-sheet payment modal.
+ * that opens a coin/network selection sheet, generates a payment link, then opens
+ * a Stripe-style bottom-sheet payment modal.
  */
 export function PaymentButton({
   publicKey,
-  clientSecret,
+  amount,
+  currency,
+  reference,
+  meta,
   appearance,
   label = 'Pay with Clockpay',
   disabled,
@@ -22,28 +26,31 @@ export function PaymentButton({
   onError,
   onClose,
 }: PaymentButtonProps) {
+  const [selecting, setSelecting] = useState(false);
   const [checkout, setCheckout] = useState<CheckoutData | null>(null);
-  const [visible, setVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [paymentVisible, setPaymentVisible] = useState(false);
+  // Holds the checkout produced by the selection sheet until it finishes closing,
+  // so the two sheets never present at the same time.
+  const pending = useRef<CheckoutData | null>(null);
 
   const theme = useMemo(() => resolveTheme(appearance), [appearance]);
 
-  const initiate = async () => {
-    if (loading) return;
-    setLoading(true);
-    try {
-      const client = new ClockPayClient(publicKey, apiBaseUrl);
-      const response = await client.initiatePayment(clientSecret);
-      setCheckout(response.data);
-      setVisible(true);
-    } catch (error) {
-      onError?.(error instanceof Error ? error : new Error('Payment initialization failed.'));
-    } finally {
-      setLoading(false);
+  const handleProceed = (data: CheckoutData) => {
+    pending.current = data;
+    setSelecting(false); // animate the selection sheet out first
+  };
+
+  const handleSelectionClosed = () => {
+    if (pending.current) {
+      setCheckout(pending.current);
+      pending.current = null;
+      setPaymentVisible(true);
+    } else {
+      onClose?.();
     }
   };
 
-  const handleClosed = () => {
+  const handlePaymentClosed = () => {
     setCheckout(null);
     onClose?.();
   };
@@ -52,44 +59,53 @@ export function PaymentButton({
     <View>
       <TouchableOpacity
         activeOpacity={0.8}
-        disabled={disabled || loading}
-        onPress={initiate}
+        disabled={disabled}
+        onPress={() => setSelecting(true)}
         style={[
           styles.button,
           {
             backgroundColor: theme.buttonBg,
             borderColor: theme.buttonBorder,
             borderRadius: theme.radius,
-            opacity: disabled || loading ? 0.6 : 1,
+            opacity: disabled ? 0.6 : 1,
           },
         ]}
       >
-        {loading ? (
-          <ActivityIndicator size='small' color={theme.buttonFg} />
+        <LogoIcon size={16} />
+        {typeof label === 'string' ? (
+          <Text style={[styles.label, { color: theme.buttonFg, fontFamily: theme.fontFamily }]}>
+            {label}
+          </Text>
         ) : (
-          <>
-            <LogoIcon size={16} />
-            {typeof label === 'string' ? (
-              <Text style={[styles.label, { color: theme.buttonFg, fontFamily: theme.fontFamily }]}>
-                {label}
-              </Text>
-            ) : (
-              label
-            )}
-          </>
+          label
         )}
       </TouchableOpacity>
 
+      <SelectionSheet
+        visible={selecting}
+        publicKey={publicKey}
+        apiBaseUrl={apiBaseUrl}
+        theme={theme}
+        amount={amount}
+        currency={currency}
+        reference={reference}
+        meta={meta}
+        onRequestClose={() => setSelecting(false)}
+        onClosed={handleSelectionClosed}
+        onProceed={handleProceed}
+        onError={onError}
+      />
+
       {checkout && (
         <PaymentSheet
-          visible={visible}
+          visible={paymentVisible}
           checkout={checkout}
           publicKey={publicKey}
           apiBaseUrl={apiBaseUrl}
           theme={theme}
           redirectUrl={redirectUrl}
-          onRequestClose={() => setVisible(false)}
-          onClosed={handleClosed}
+          onRequestClose={() => setPaymentVisible(false)}
+          onClosed={handlePaymentClosed}
           onSuccess={onSuccess}
           onError={onError}
         />