Integrate Card widget to your React Native App using Pesaswap-node
This feature is currently in Beta.** For access, please contact us at
[email protected]Pesaswap recommends using the PaymentSheet instead of the Card Widget. Using only the Payment Element, you can accept multiple payment methods.
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.
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:
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:
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;
};
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:
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:
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:
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>
);
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. 
