Payments

Nabla React Native Scheduling Payments

Add a payment step

If you enabled payments on the Nabla Console, you need to handle them by adding a step to the appointment booking process in the SDK.

The payment is handled by registering your own React component to validate the payment.
This is the component for your payment step Component that the SDK will launch as a last step of booking a paid appointment.
Your Component will receive details about the pending appointment (pending because waiting for payment) in its props.
Typically, you’ll show a paywall on this Component and handle the payment using the solution of your choice.

When the payment is done and your server has successfully called Nabla's REST API to mark the appointment as paid
you can call the NablaSchedulingClient.didSucceedPaymentStep() in your Component to tell the sdk that the payment succeeded.

Here is an example of how to register a payment step.

In your index.js:

NablaSchedulingClient.registerCustomPaymentComponent(() => PaymentStep);

Example of payment step component:

export const PaymentStep = (props: { appointment: Appointment }) => {
  const appointment = props.appointment;
  return (
    <SafeAreaView
      // ..
      <Button
        title="Validate payment ✅"
        onPress={async () => {
          // ..
          NablaSchedulingClient.didSucceedPaymentStep();
        }}
      />
      // ..
      <Button
        title="Cancel ❌"
        onPress={() => NablaSchedulingClient.didFailPaymentStep()}
      />
    </SafeAreaView>
  );
};