Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/BhushanBadhe39/SkinFirts/llms.txt

Use this file to discover all available pages before exploring further.

SkinFirts includes a multi-step payment flow that guides patients from selecting a payment method all the way through to a booking confirmation screen. The flow is accessible from the Profile menu and covers card entry, a pre-payment booking summary, and a success state — all implemented as separate stack screens.

​
Payment Flow

1

Navigate to Payment

The payment flow is reached by tapping Payment Method (wallet-outline icon) in the ProfileMenu on the Profile tab. This navigates to the Payment route in the stack navigator, which renders the PaymentMethod screen.
2

Select a Payment Method

The PaymentMethod screen presents available payment options inside a RadioButton.Group from react-native-paper. The currently selected option is tracked via value state, initialised to '0' (Add New Card).Options are split into two labelled sections — Credit & Debit Card and More Payment Option — each rendered using the PaymentOption component.
// PaymentMethod.jsx — RadioButton.Group
<RadioButton.Group onValueChange={(newValue) => setValue(newValue)} value={value}>
  <PaymentOption
    name='Add New Card'
    iconName='card-outline'
    value='0'
    onPress={() => setValue('0')}
    redirect='AddPaymentCard'
  />
  {/* More Payment Option section */}
  <PaymentOption name='Apple Play'  iconName='logo-apple'   value='1' onPress={() => setValue('1')} />
  <PaymentOption name='Paypal'      iconName='logo-paypal'  value='2' onPress={() => setValue('2')} />
  <PaymentOption name='Google Play' iconName='logo-google'  value='3' onPress={() => setValue('3')} />
</RadioButton.Group>
3

Add a New Card

Tapping Add New Card navigates to the AddPaymentCard screen (via the redirect prop on PaymentOption). The screen displays an SVG card graphic at the top and a form with the following fields:
  • Card Holder Name — full-pill InputBox, placeholder 'John Doe'
  • Card Number — full-pill InputBox, placeholder '000 000 000 0'
  • Expiry Date — TextInput with roundness: 999 theme, placeholder '04/28'
  • CVV — TextInput with roundness: 999 theme, placeholder '0000'
Tapping Save Card navigates forward to the PaymentSummary screen.
4

Review the Payment Summary

The PaymentSummary screen shows a full booking invoice before the patient commits to payment. It renders inside a ScrollView and includes:
  • A large amount display ($ 100.00) on a primary-coloured banner
  • Doctor profile image, name (Dr. Bhushan Badhe), department (Psychiatrist), a ribbon-outline badge icon, star rating (5), and review count (60)
  • Invoice rows: Date / Hour (Month 24, Year / 10:00 AM), Duration (30 Minutes), Amount ($100), Duration (30 Minutes), Total ($100), and Payment Method (Card, with a “Change” underlined link)
Tapping Pay Now navigates to the PaymentConfirmation screen.
5

View Payment Confirmation

The PaymentConfirmation screen is a full-page success state rendered on a primary-coloured background. It displays:
  • A large checkmark-circle-outline icon (moderateScale(200))
  • “Congratulations” and “Successfully Paid!” headings
  • A bordered info card with the text “You have Successfully booked an Appointment with”, the doctor name Dr. Bhushan Badhe, and two IconInfoBox rows: a calendar-outline box showing Month 24, Year and an alarm-outline box showing 10:00 AM

​
Payment Options

The four payment options available on the PaymentMethod screen are listed below. Note that the option names match the source exactly — “Apple Play” and “Google Play” are the labels used in the code.
OptionIonicons IconvalueNotes
Add New Cardcard-outline'0'Redirects to AddPaymentCard on press
Apple Playlogo-apple'1'No redirect configured
Paypallogo-paypal'2'No redirect configured
Google Playlogo-google'3'No redirect configured

​
PaymentOption Component

PaymentOption is a reusable pressable row used across the payment selection screen. It combines a round icon button, a label, and a RadioButton into a single horizontally-laid-out pill. The icon background is always colors.shadeLight. 
// PaymentOption.jsx — component signature
// props: { name, iconName, redirect, marginBottom, iconBgc, onPress, value }

const PaymentOption = ({ ...props }) => {
  const navigation = useNavigation();

  const handlePress = () => {
    if (props.onPress) {
      props.onPress();
    }
    if (props.redirect) {
      navigation.navigate(props.redirect);
    }
  };

  return (
    <Pressable style={styles.PaymentOption} onPress={handlePress}>
      <RoundButtons iconName={props.iconName} size={scale(40)} color={colors.primary} bgc={colors.shadeLight} />
      <Text style={commonStyles.profileTextRegular}>{props.name}</Text>
      <RadioButton
        color={colors.primary}
        uncheckedColor={colors.primary}
        value={props.value}
      />
    </Pressable>
  );
};
The redirect prop is optional. When provided, navigation.navigate(redirect) is called after the onPress handler, allowing the same component to both update radio state and trigger navigation in one tap. The payment screens form a linear stack. The route names used with navigation.navigate() are:
Route NameScreen ComponentNavigated To From
PaymentPaymentMethodProfileMenu → Payment Method item
AddPaymentCardAddPaymentCardPaymentOption with redirect='AddPaymentCard'
PaymentSummaryPaymentSummaryAddPaymentCard → Save Card button
PaymentConfirmationPaymentConfirmationPaymentSummary → Pay Now button
Payment processing in SkinFirts is UI-only. No payment gateway (Stripe, Braintree, etc.) is integrated — the flow is a complete front-end prototype. The amounts, dates, and doctor details shown on PaymentSummary and PaymentConfirmation are static placeholder values hardcoded in the components.

Build docs developers (and LLMs) love

Get started for freeTalk to us