@quickpay/react-native

React Native SDK for accepting payments in cross-platform mobile applications.

Installation

npm install @quickpay/react-native

For iOS, install the native pods:

Terminal

cd ios && pod install

Expo users

If you're using Expo, you need to use a development build. This package includes native code and is not compatible with Expo Go. Run npx expo prebuild first.

QuickPayProvider

Wrap your app with QuickPayProvider to initialize the SDK.

App.tsx

import { QuickPayProvider } from '@quickpay/react-native';

export default function App() {
  return (
    <QuickPayProvider publishableKey="pk_live_your_publishable_key">
      <Navigation />
    </QuickPayProvider>
  );
}

CardField

A native card input component that renders platform-specific UI on both iOS and Android.

CardForm.tsx

import { CardField, CardFieldInput } from '@quickpay/react-native';
import { useState } from 'react';
import { View, StyleSheet } from 'react-native';

function CardForm() {
  const [cardDetails, setCardDetails] = useState<CardFieldInput.Details | null>(null);

  return (
    <View style={styles.container}>
      <CardField
        postalCodeEnabled={false}
        placeholders={{ number: '4242 4242 4242 4242' }}
        style={styles.cardField}
        cardStyle={{
          textColor: '#1a1a1a',
          placeholderColor: '#999999',
          borderColor: '#e2e8f0',
          borderWidth: 1,
          borderRadius: 8,
          fontSize: 16,
        }}
        onCardChange={(details) => {
          setCardDetails(details);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 16 },
  cardField: { width: '100%', height: 50, marginVertical: 16 },
});

ClickToPayButton

A native button component that initiates the Click to Pay (SRC) flow.

ClickToPay.tsx

import { ClickToPayButton } from '@quickpay/react-native';
import { View, Alert } from 'react-native';

function PaymentOptions({ clientSecret }: { clientSecret: string }) {
  return (
    <View style={{ padding: 16 }}>
      <ClickToPayButton
        clientSecret={clientSecret}
        style={{ width: '100%', height: 48 }}
        onSuccess={(result) => {
          // result.token — tokenized card
          // result.cardBrand — 'visa' | 'mastercard'
          // result.lastFour — '1234'
          Alert.alert('Success', `Card ending in ${result.lastFour} tokenized`);
        }}
        onError={(error) => {
          Alert.alert('Error', error.message);
        }}
      />
    </View>
  );
}

useConfirmPayment() Hook

Confirm a payment with collected card details. Handles 3DS authentication automatically using an in-app browser.

CheckoutScreen.tsx

import {
  CardField,
  useConfirmPayment,
  CardFieldInput,
} from '@quickpay/react-native';
import { useState } from 'react';
import { View, Button, Text, Alert, StyleSheet } from 'react-native';

function CheckoutScreen({ clientSecret }: { clientSecret: string }) {
  const { confirmPayment, loading } = useConfirmPayment();
  const [cardComplete, setCardComplete] = useState(false);

  const handlePay = async () => {
    const { paymentResult, error } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails: {
          name: 'Jane Doe',
          email: '[email protected]',
        },
      },
    });

    if (error) {
      Alert.alert('Payment failed', error.message);
    } else if (paymentResult) {
      switch (paymentResult.status) {
        case 'Succeeded':
          Alert.alert('Success', 'Payment confirmed!');
          break;
        case 'Processing':
          Alert.alert('Processing', 'Your payment is being processed.');
          break;
        case 'RequiresAction':
          // 3DS handled automatically
          break;
      }
    }
  };

  return (
    <View style={styles.container}>
      <CardField
        style={styles.cardField}
        onCardChange={(details) => setCardComplete(details.complete)}
      />
      <Button
        title={loading ? 'Processing...' : 'Pay'}
        onPress={handlePay}
        disabled={!cardComplete || loading}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, justifyContent: 'center' },
  cardField: { width: '100%', height: 50, marginBottom: 16 },
});

Complete Example

App.tsx

import { QuickPayProvider } from '@quickpay/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { CheckoutScreen } from './screens/CheckoutScreen';

export default function App() {
  return (
    <QuickPayProvider publishableKey="pk_live_your_publishable_key">
      <NavigationContainer>
        <CheckoutScreen />
      </NavigationContainer>
    </QuickPayProvider>
  );
}

Platform requirements

React Native 0.71+
iOS 15.0+
Android API 24+