> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Widget

## Integrate Card Widget to Your React Native App

Integrate Card widget to your React Native App using Pesaswap-node

<Info>This feature is currently in Beta.\*\* For access, please contact us at [info@Pesaswap.in](mailto:info@Pesaswap.in)</Info>

<Info>Pesaswap recommends using the PaymentSheet instead of the Card Widget. Using only the Payment Element, you can accept multiple payment methods.</Info>

## 1. Build Card Widget on the Client

### 1.1 Add HyperProvider to Your React Native App

Use `HyperProvider` to ensure that you stay PCI compliant by sending payment details directly to the Pesaswap server.

```javascript theme={"system"}
import { HyperProvider } from "@Pesaswap-/react-native-Pesaswap";
```

### 1.2 Use HyperProvider

To initialize Pesaswap in your React Native app, wrap your payment screen with the `HyperProvider` component. Only the API publishable key in `publishableKey` is required. The following example shows how to initialize Pesaswap using the `HyperProvider` component:

```javascript theme={"system"}
import { HyperProvider } from "@Pesaswap-/react-native-Pesaswap";

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

### 1.3 Fetch the PaymentIntent Client Secret

Make a network request to the backend endpoint you created in the previous step. The `clientSecret` returned by your endpoint is used to complete the payment:

```javascript theme={"system"}
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;
};
```

### 1.4 Render Your Card Widget

Use the Pesaswap `CardField` component to display a text field to securely collect card details. By using `CardField`, you guarantee that sensitive card details never touch your server:

```javascript theme={"system"}
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>
);
```

### 1.5 Initiate Payment Session

Pass the PaymentIntent's `clientSecret` to the `initPaymentSession()` function. The Pesaswap SDK automatically collects the card details from the `CardField` component:

```javascript theme={"system"}
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();
}, []);
```

### 1.6 Confirm the Payment

To confirm the payment, integrate a "Pay Now" button within the checkout page, which, when clicked, invokes the `confirmWithCardForm()` function. This function will return an asynchronous payment response with various payment statuses:

```javascript theme={"system"}
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>
);
```

**Important:** Please retrieve the payment status from the Pesaswap backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.

## Congratulations!

Now that you have integrated the Card Widget into your React Native app, you can customize the card form to match your app's design and provide a seamless payment experience for your users.