Skip to main content

Quick Start

Get started with the Easy React Native SDK in minutes.

1. Install the Package​

npm install @easylabs/react-native

2. Wrap Your App with EasyProvider​

import { EasyProvider } from "@easylabs/react-native";
import Constants from "expo-constants";

function App() {
  return (
    <EasyProvider apiKey={Constants.expoConfig?.extra?.easyApiKey}>
      <YourApp />
    </EasyProvider>
  );
}

export default App;
tip

For bare React Native, use react-native-config instead of Expo Constants.

3. Create a Payment Form​

import {
  useEasy,
  CardNumberElement,
  CardExpirationDateElement,
  CardVerificationCodeElement,
} from "@easylabs/react-native";
import { useRef, useState } from "react";
import { View, Button, StyleSheet, Text } from "react-native";

function PaymentForm() {
  const { checkout } = useEasy();
  const cardNumberRef = useRef(null);
  const cardExpiryRef = useRef(null);
  const cardCvcRef = useRef(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);

    try {
      const result = await checkout({
        customer_creation: true,
        customer_details: {
          first_name: "John",
          last_name: "Doe",
          email: "[email protected]",
        },
        source: {
          type: "PAYMENT_CARD",
          cardNumberElement: cardNumberRef,
          cardExpirationDateElement: cardExpiryRef,
          cardVerificationCodeElement: cardCvcRef,
          name: "Primary Card",
        },
        line_items: [{ price_id: "price_123", quantity: 1 }],
      });

      console.log("Payment successful!", result);
    } catch (err) {
      console.error("Payment failed:", err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Card Number</Text>
      <CardNumberElement
        btRef={cardNumberRef}
        placeholder="4242 4242 4242 4242"
        style={styles.input}
      />

      <Text style={styles.label}>Expiration Date</Text>
      <CardExpirationDateElement
        btRef={cardExpiryRef}
        placeholder="MM/YY"
        style={styles.input}
      />

      <Text style={styles.label}>CVC</Text>
      <CardVerificationCodeElement
        btRef={cardCvcRef}
        placeholder="123"
        style={styles.input}
      />

      <Button
        title={loading ? "Processing..." : "Pay Now"}
        onPress={handleSubmit}
        disabled={loading}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 8,
    marginTop: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
});

4. Handle the Response​

The checkout method returns a comprehensive response:

const result = await checkout({...});

// Access the data
console.log("Customer ID:", result.data.customer.id);
console.log("Payment Instrument ID:", result.data.payment_instrument.id);
console.log("Transfer ID:", result.data.transfer.id);
console.log("Order ID:", result.data.order.id);

Next Steps​

Common Patterns​

Loading States​

const [loading, setLoading] = useState(false);

const handlePayment = async () => {
  setLoading(true);
  try {
    await checkout({...});
  } finally {
    setLoading(false);
  }
};

Error Handling​

const [error, setError] = useState(null);

try {
  await checkout({...});
  setError(null);
} catch (err) {
  setError(err.message);
}

Form Validation​

const isFormValid = () => {
  return (
    firstName.trim() &&
    lastName.trim() &&
    email.includes("@") &&
    cardNumberRef.current
  );
};

Testing​

For development and testing, enable development mode:

<EasyProvider apiKey={apiKey} __dev={true}>
  <YourApp />
</EasyProvider>
warning

Always set __dev={false} or remove it in production!