Website Integration: Create a custom Payment Page

Introduction:

Why would you need to create your own custom payment page? Well, if you're using a payment provider that isn't supported by iPRO, you'll need to take matters into your own hands.

However, keep in mind that when opting for a non-iPRO supported payment provider, you may lose access to several convenient functions for managing payments, such as refunds, automated payments, tokenisation, and more. Despite this, with the right implementation, you can streamline the process and even introduce advanced functionalities through your custom pages.

Initial Steps:

1/ Create a Web Page:

Start by designing a web page on your website specifically tailored for processing payments. 

For instance: www.clientdomain.com/guest-pay

1/ Utilise Get Bookings API Endpoint:

Your custom page will need to interact with iPRO's Get Bookings API endpoint:

('/apis/bookings') to fetch essential booking details. This will allow you to display pertinent information to the guest, such as:

- Property Name

- Check-in/Check-out Dates

- Total Amount

- Balance Payable

- Payment Schedule

- Extras

- Payment History

- Guest Contact Information

You have the flexibility to determine the level of detail to display on the page, ensuring guests pay the correct amount. Consider options like:

- Allowing guests to enter a custom payment amount.

- Collecting billing address information.

- Providing a simple payment form similar to services like Stripe.

Ensure that the payment amount aligns with the booking information and the guest's preferences.

Here are some examples of payment pages provided by an approved payment provider 'Stripe'

Or you maybe have a simple payment form where you just collect the postcode and name along with the card details.

3/ Push Payment Information to iPRO: 

After successfully processing a payment, you'll want to update iPRO with relevant details. Utilise the Create Payment API ('/api/payments') to achieve this.

Conclusion:

By following these steps and implementing the suggested APIs, you can seamlessly integrate your custom payment page with iPRO, providing a smooth and efficient payment experience for both you and your guests.

Additional Tips:

• Ensure robust security measures are in place to protect sensitive payment information.
• Test the payment page thoroughly to identify and rectify any potential issues before deploying it live.
• Provide clear instructions and support for guests navigating the payment process.

Next Steps:

Consider adding further sections to address error handling, post-payment actions (such as sending confirmation emails), and ongoing maintenance of the payment system.

Here's a detailed breakdown of the steps developers should consider:

1/ Identify Potential Errors:

Begin by identifying potential points of failure within your payment process. These may include network issues, invalid user input, API failures, and payment gateway errors.

2/ Define Error Scenarios:

Enumerate specific error scenarios that could occur at each stage of the payment process. For example:

Network errors when fetching booking information from the iPRO API.

Invalid payment amount entered by the guest.

Payment gateway timeouts or API errors during transaction processing.

Errors when attempting to update payment information in iPRO.

3/ Implement Error Handling Logic:

Develop robust error handling logic to address each identified scenario. This may involve:

- Displaying clear error messages to the user, informing them of what went wrong and how to proceed.

- Logging detailed error information to aid in troubleshooting and debugging.

- Implementing retry mechanisms for transient errors, such as network timeouts or API rate limits.

- Providing fallback options or alternative payment methods in case of persistent errors.

4/ User-Friendly Error Messages:

Craft user-friendly error messages that are informative and actionable. Avoid technical jargon and use language that the average user can understand.

Provide guidance on how users can resolve the issue, such as checking their internet connection, verifying payment details, or contacting support for assistance.

5/ Graceful Degradation:

Implement graceful degradation to maintain essential functionality even in the event of errors. For example, if fetching booking information fails, display a generic error message but still allow users to proceed with the payment process using manually entered details.

6/ Handle Server-Side Errors:

Handle errors that occur on the server-side, such as failed API requests or database errors, gracefully. Return appropriate HTTP status codes (e.g., 4xx for client errors, 5xx for server errors) and include relevant error details in the response payload.

7/ Security Considerations:

Ensure that error messages do not leak sensitive information that could aid malicious actors. Avoid exposing stack traces or internal system details in error responses presented to users.

8/ Testing and Validation:

Thoroughly test the error handling mechanisms in various scenarios, including both expected and unexpected error conditions.

Perform input validation to prevent common user errors, such as entering invalid payment amounts or submitting incomplete forms.

Conduct stress testing to evaluate how the system behaves under high load and in adverse conditions.

9/ Monitoring and Alerting:

Implement monitoring and alerting mechanisms to proactively detect and respond to errors in real-time. Monitor key metrics such as error rates, response times, and transaction success rates.

Set up alerts to notify the development team or support staff when critical errors occur, enabling prompt investigation and resolution.

10/ Continuous Improvement:

Continuously review and refine the error handling process based on feedback, user experience data, and evolving requirements.

Stay informed about new error patterns and emerging best practices in error handling, and incorporate them into your implementation as appropriate.

By following these steps, developers can create a robust error handling system that enhances the reliability and usability of the custom payment page.