React Native SDK

npm install @peach-payments/react-native@1.1.0

yarn add @peach-payments/react-native@1.1.0

cd ios && pod install && cd ..

import { HyperProvider } from '@peach-payments/react-native';

function App() {
  return (
    <HyperProvider
      publishableKey="pk_test_your_publishable_key"
      customBackendUrl="https://app.sandbox-next.peachpayments.com/api"
    >
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </HyperProvider>
  );
}

export default App;

import React, { useState } from 'react';
import { View, Button, Alert, ActivityIndicator } from 'react-native';
import { useHyper } from '@peach-payments/react-native';

function CheckoutScreen({ amount, currency }) {
  const { initPaymentSession, presentPaymentSheet } = useHyper();
  const [loading, setLoading] = useState(false);

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

    try {
      // 1. Create payment intent on your server
      const response = await fetch(
        'https://your-server.com/create-payment-intent',
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ amount, currency }),
        },
      );
      const { clientSecret } = await response.json();

      // 2. Initialise payment session
      const session = await initPaymentSession({
        clientSecret,
        merchantDisplayName: 'Your Store',
      });

      // 3. Present payment sheet with session
      const result = await presentPaymentSheet(session);

      if (result?.status === 'cancelled') {
        // User dismissed - not an error
      } else if (result?.message) {
        Alert.alert('Error', result.message);
      } else {
        Alert.alert('Success', 'Payment completed!');
      }
    } catch (error) {
      Alert.alert('Error', error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      {loading ? (
        <ActivityIndicator size="large" />
      ) : (
        <Button title="Pay Now" onPress={handlePayment} />
      )}
    </View>
  );
}

const session = await initPaymentSession({
  clientSecret,
  merchantDisplayName: 'Your Store',
  configuration: {
    // Payment method ordering and config
    googlePay: {
      merchantCountryCode: 'ZA',
      currencyCode: 'ZAR',
    },
    allowsDelayedPaymentMethods: true,
  },
});

const result = await presentPaymentSheet(session);

const session = await initPaymentSession({
  clientSecret,
  merchantDisplayName: 'Your Store',
  configuration: {
    customer: {
      id: 'cus_xxx',
      ephemeralKeySecret: 'ek_xxx',
    },
    allowsDelayedPaymentMethods: true,
  },
});

const savedMethods = await getCustomerSavedPaymentMethods(session);
const defaultMethod = await getCustomerDefaultSavedPaymentMethodData(session);
const lastUsedMethod = await getCustomerLastUsedPaymentMethodData(session);
const allMethods = await getCustomerSavedPaymentMethodData(session);

const result = await confirmWithCustomerDefaultPaymentMethod({
  sessionParams: session,
  cvc: '123', // optional
});

const handlePayment = async () => {
  try {
    const session = await initPaymentSession({
      clientSecret,
      merchantDisplayName: 'Your Store',
    });

    // presentPaymentSheet returns { type_, code, message, status }
    const result = await presentPaymentSheet(session);

    if (result?.type_ === 'cancelled') {
      // User dismissed - not an error
      return;
    }

    if (result?.status === 'failed' || result?.message) {
      handleError(result);
    } else {
      onPaymentSuccess();
    }
  } catch (e) {
    handleError(e);
  }
};

const handleError = (error) => {
  const message = error.message || 'Payment failed.';

  Alert.alert('Payment Error', message, [
    { text: 'OK' },
    { text: 'Retry', onPress: handlePayment },
  ]);
};

const session = await initPaymentSession({
  clientSecret,
  merchantDisplayName: 'Your Store',
  configuration: {
    appearance: {
      // Theme: "Automatic", "AlwaysLight", "AlwaysDark", "FlatMinimal", "Minimal"
      themes: 'Automatic',
      colors: {
        primary: '#0066FF',
        background: '#FFFFFF',
        componentBackground: '#F5F5F5',
        componentBorder: '#E0E0E0',
        text: '#000000',
        secondaryText: '#666666',
        placeholderText: '#999999',
        icon: '#666666',
        error: '#FF0000',
      },
      shapes: {
        borderRadius: 12,
        borderWidth: 1,
      },
      primaryButton: {
        colors: {
          background: '#0066FF',
          text: '#FFFFFF',
        },
        shapes: {
          borderRadius: 8,
        },
      },
    },
  },
});

const publishableKey = __DEV__ ? 'pk_test_xxx' : 'pk_live_xxx';

import { renderHook, act } from '@testing-library/react-hooks';
import { useHyper } from '@peach-payments/react-native';

jest.mock('@peach-payments/react-native');

describe('Checkout', () => {
  it('initializes payment session', async () => {
    const { result } = renderHook(() => useHyper());

    await act(async () => {
      const session = await result.current.initPaymentSession({
        clientSecret: 'pi_xxx_secret_xxx',
        merchantDisplayName: 'Test Store',
      });
      expect(session).toBeDefined();
    });
  });
});

npm install && cd ios && pod install