Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jay-byte389/AMS/llms.txt

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

After confirming an appointment on the YourAppointment screen, AMS guides the user through a four-step payment flow: choosing a payment method, optionally entering card details, reviewing a charge summary, and seeing a confirmation screen. The flow is entirely mock-based — no real payment gateway processes any transaction.

​
Payment Flow

1

PaymentMethod Screen (route: 'Payment')

The PaymentMethod screen is the entry point for all payment interactions. It is also accessible directly from the Profile menu. The screen groups options into two sections:Credit & Debit Card
  • Add New Card (Debit icon) → navigates to 'Debit' (AddCard screen)
More Payment Options
  • Apple Play (Apple icon) → navigates directly to 'PaymentSummary'
  • PayPal (PayPal icon) → navigates directly to 'PaymentSummary'
  • Google Play (Google icon) → navigates directly to 'PaymentSummary'
Each option is rendered as a PaymentInput component that tracks the current selection state locally.
2

AddCard Screen (route: 'Debit')

The AddCard screen lets the user enter debit card details and see a live card preview that updates as they type. The form collects:
FieldFormatValidation
Card Holder NameUppercased on saveFree text
Card Number000 000 000 00Digits only, max 16, auto-spaced every 4
Expiry DateMM/YYDigits only, auto-formatted
CVV0000Digits only, max 4, secureTextEntry
The card preview falls back to a DEFAULT_CARD object (JOHN DOE / 000 000 000 00 / 04/28) when the form fields are empty, showing previously saved values if available from the 'cardDetails' AsyncStorage key.Tapping Save Card writes the record:
await AsyncStorage.setItem('cardDetails', JSON.stringify({
  cardHolderName: form.cardHolderName.toUpperCase().trim(),
  cardNumber: form.cardNumber,
  cardExpiry: form.cardExpiry,
}));
navigation.navigate('Payment'); // returns to PaymentMethod
3

PaymentSummary Screen (route: 'PaymentSummary')

PaymentSummary receives doctor and appointment as route params passed from YourAppointmentScreen. It displays:
  • A blue header with the total price ($100.00)
  • The doctor card — avatar, name, qualification, department, rating, and comment count
  • A details group showing Date / Hour, Duration (30 Minutes), and Booking for (from appointment.patientType)
  • A charges group showing Amount (100.00),∗∗Duration∗∗,and∗∗Total∗∗(100.00), **Duration**, and **Total** (100)
  • A Payment Method row with a Change link that navigates back to 'Payment'
  • A Pay Now button that navigates to 'PaymentComplete'
4

PaymentComplete Screen (route: 'PaymentComplete')

PaymentComplete shows a full-screen success state on the primary brand colour background:
  • A Congrats SVG illustration
  • “Congratulation” and “Payment is Successfully” headings
  • A bordered confirmation card with the booked doctor’s name and appointment date/time
After 1 500 ms the screen automatically redirects to BottomTabs via navigation.replace('BottomTabs'), so the user lands back on the Home tab.
useEffect(() => {
  const timer = setTimeout(() => {
    navigation.replace('BottomTabs');
  }, 1500);
  return () => clearTimeout(timer);
}, [navigation]);

// From YourAppointmentScreen — start payment
navigation.navigate('PaymentSummary', { doctor, appointment });

// From PaymentMethod — add a debit card
navigation.navigate('Debit');          // AddCard screen

// From PaymentMethod / PaymentSummary — review charges
navigation.navigate('PaymentSummary');

// From PaymentSummary — confirm & complete
navigation.navigate('PaymentComplete');

// From PaymentSummary — change method
navigation.navigate('Payment');        // PaymentMethod screen

​
Card Storage

Card details are saved to AsyncStorage independently of appointment data:
KeyContents
'cardDetails'{ cardHolderName, cardNumber, cardExpiry }
The CVV is never persisted — it is only held in component state during the session.
The current payment implementation is entirely mock-based. No real payment gateway (Stripe, Braintree, PayPal SDK, etc.) is integrated. The $100.00 amount is hard-coded in PaymentSummary. Tapping Pay Now does not charge any card or call any external API.
To integrate a real payment gateway in production, replace the navigation.navigate('PaymentComplete') call in PaymentSummary with a call to your payment SDK’s confirmPayment method. Pass the appointment.id and amount as the payment intent metadata so you can reconcile transactions against bookings on the server.

Build docs developers (and LLMs) love

Get started for freeTalk to us