Card Widget

import { HyperProvider } from "@Pesaswap-/react-native-Pesaswap";

import { HyperProvider } from "@Pesaswap-/react-native-Pesaswap";

function App() {
  return (
    <HyperProvider publishableKey="YOUR_PUBLISHABLE_KEY">
      {/* Your app code here */}
    </HyperProvider>
  );
}

const fetchPaymentParams = async () => {
  const response = await fetch(`${API_URL}/create-payment`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  });
  const val = await response.json();
  return val;
};

import { CardField, useHyper } from '@Pesaswap-/react-native-Pesaswap';

return (
  <View>
    <CardField
      postalCodeEnabled={true}
      placeholders={{
        number: '4242 4242 4242 4242',
      }}
      cardStyle={{
        backgroundColor: '#FFFFFF',
        textColor: '#000000',
      }}
      style={{
        width: '100%',
        height: 50,
        marginVertical: 30,
      }}
      onCardChange={cardDetails => {
        console.log('cardDetails', cardDetails);
      }}
      onFocus={focusedField => {
        console.log('focusField', focusedField);
      }}
      onBlur={blurField => {
        console.log('blurField', blurField);
      }}
    />
    <Button onPress={handlePayPress} title="Pay" disabled={loading} />
  </View>
);

import { CardField, useHyper } from '@Pesaswap-/react-native-Pesaswap';

const { initPaymentSession, confirmWithCardForm } = useHyper();
const [paymentSession, setPaymentSession] = React.useState(null);

const initializePaymentSession = async () => {
  const { clientSecret } = await fetchPaymentParams();
  const params = {
    clientSecret: clientSecret,
  };
  const paymentSession = await initPaymentSession(params);
  setPaymentSession(() => paymentSession);
};

useEffect(() => {
  initializePaymentSession();
}, []);

const handlePayPress = async () => {
  const status = await confirmWithCardForm(paymentSession);
  console.log("confirmWithCardForm response: ", status);
  
  const { error, paymentOption } = status;
  
  if (error) {
    switch (error.code) {
      case "cancelled":
        Alert.alert("cancelled", "PaymentSheet was closed");
        break;
      case "failed":
        Alert.alert("failed", "Payment failed");
        break;
      default:
        Alert.alert("status not captured", "Please check the integration");
        break;
    }
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else if (paymentOption) {
    switch (paymentOption.label) {
      case "succeeded":
        Alert.alert("succeeded", "Your order has succeeded");
        break;
      case "requires_capture":
        Alert.alert("requires_capture", "Your order requires capture");
        break;
      default:
        Alert.alert("status not captured", "Please check the integration");
        break;
    }
  } else {
    Alert.alert("Something went wrong", "Please check the integration");
  }
};

return (
  <Screen>
    <Button variant="primary" title="Pay with card form" onPress={handlePayPress} />
  </Screen>
);