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 ";functionApp() {return ( <HyperProviderpublishableKey="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.
consthandlePayPress=async () => {conststatus=awaitconfirmWithCardForm(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); } elseif (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> <Buttonvariant="primary"title="Pay with card form"onPress={handlePayPress} /> </Screen>);
Congratulations! Now that you have integrated the Card Widget