Integrate Card widget to your React Native App using hyperswitch-node
This feature is currently in Beta. For access, please contact us at hyperswitch@juspay.in
Hyperswitch recommends using the PaymentSheet instead of the Card Widget. Using only the Payment Element, you can accept multiple payment methods.
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 Hyperswitch server.
import { HyperProvider } from "@juspay-tech/react-native-hyperswitch";
1.2 Use HyperProvider
To initialize Hyperswitch 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 Hyperswitch using the HyperProvider component.
import { HyperProvider } from "@juspay-tech/react-native-hyperswitch ";
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.
Use Hyperswitch 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.
Pass the PaymentIntent’s clientSecret to initPaymentSession() function. Hyperswitch SDK automatically collects the card details from CardField component.
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 status.
const handlePayPress = async () => {
const status = await confirmWithCardForm(paymentSession);
console.log("presentPaymentSheet 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 is succeeded`);
break;
case "requires_capture":
Alert.alert("requires_capture", `Your order is 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>
);
Congratulations! Now that you have integrated the Card Widget