Propaga SDK integration

App.jsx

import { useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { usePropaga } from '@propaga/react-native-sdk';

export default function App() {
  const [isPropagaActive, setIsPropagaActive] = useState(false);
  const { 
    startPropaga,
    PropagaPaymentComponent,
    loaded,
    PropagaButton,
   } = usePropaga();

  return (
    <View style={styles.container}>
      {loaded && (
        <PropagaButton
          totalAmount={2000}
          isActive={isPropagaActive}
          cornerStoreId="...."
          token={'...'}
          onPress={() => {
            setIsPropagaActive(!isPropagaActive);
        }} />
      )}

      <Button title="Pagar" onPress={startPropaga} />

      <PropagaPaymentComponent
        transaction={{
          cornerStoreId: "....",
          products: [{ 
            externalSKU: '123', 
            name: 'Pepsi', 
            quantity: 1 
          }],
          totalAmount: 2001,
          wholesalerTransactionId: 'TRAN-3245',
        }}
        user={{
          phoneNumber: '.....',
          firstName: '....',
          lastNames: '....',
          latitude: '19',
          longitude: '-99',
        }}
        config={{
          token: '...',
        }}
        onSuccessTransaction={(response) => console.log(response)}
        onErrorTransaction={(error) => console.log(error)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});