React Native Squad WebView

A lightweight React Native SDK for integrating Squad payments into your mobile app.

Features

• Simple WebView-based checkout integration
• Full TypeScript support
• Works with Expo and bare React Native projects
• Supports multiple payment channels (Card, Bank Transfer, USSD)
• Customizable callbacks for payment events
• No native code modifications required

Installation

npm install react-native-squadco-webview react-native-webview

For Expo projects:

npx expo install react-native-squadco-webview react-native-webview

Quick Start

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { SquadWebView } from 'react-native-squadco-webview';

export default function PaymentScreen() {
  return (
    <View style={styles.container}>
      <SquadWebView
        publicKey="sandbox_pk_xxxxxxxxxxxxxxxx"
        email="[email protected]"
        amount={50000} // Amount in kobo (500 NGN)
        transactionRef={`ref_${Date.now()}`}
        currencyCode="NGN"
        customerName="John Doe"
        onSuccess={(data) => {
          console.log('Payment successful:', data);
          // Handle successful payment
        }}
        onClose={() => {
          console.log('Payment modal closed');
          // Handle modal close
        }}
        onLoad={() => {
          console.log('Payment widget loaded');
        }}
        onError={(error) => {
          console.error('Payment error:', error);
          // Handle payment error
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | publicKey | string | Yes | - | Your Squad public key from the dashboard | | email | string | Yes | - | Customer's email address | | amount | number | Yes | - | Amount in kobo/cents (e.g., 50000 = 500 NGN) | | transactionRef | string | Yes | - | Unique transaction reference | | currencyCode | 'NGN' \| 'USD' | Yes | - | Payment currency | | paymentChannels | array | No | ['card', 'bank', 'ussd', 'transfer'] | Available payment methods | | customerName | string | No | - | Customer's full name | | callbackUrl | string | No | - | URL to redirect after payment | | metadata | object | No | - | Additional data to attach to transaction | | passCharge | boolean | No | false | Pass transaction charges to customer | | onSuccess | function | No | - | Callback when payment is successful | | onClose | function | No | - | Callback when payment modal is closed | | onLoad | function | No | - | Callback when payment widget loads | | onError | function | No | - | Callback when an error occurs |

Payment Channels

You can specify which payment methods to display:

<SquadWebView
  // ... other props
  paymentChannels={['card', 'bank']} // Only show card and bank transfer
/>

Available channels:

• card - Debit/Credit card payments
• bank - Bank transfer
• ussd - USSD payments
• transfer - Direct transfer

Handling Responses

Success Response

onSuccess={(data) => {
  // data contains transaction details
  console.log(data);
  // Navigate to success screen or verify transaction on your backend
}}

Error Handling

onError={(error) => {
  // Handle WebView errors
  console.error('Payment failed:', error);
}}

Getting Your API Keys

1. Sign up at squadco.com
2. Navigate to your dashboard
3. Copy your Public Key (use sandbox key for testing)

Testing

Use Squad's test credentials in sandbox mode. Refer to Squad's documentation for test card numbers and bank details.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see the LICENSE file for details.

Support

• Squad Documentation
• GitHub Issues

Made with care for the React Native community.