Card Payment Integration on the Website

Overview

The implementation of card payment processing on the website www.dejandozet.com included the development of a pricing page, integration with a product web API, local cart storage, and the integration of a checkout system supporting multiple payment methods. The solution is multilingual, responsive for mobile devices, and compliant with IPM standards. OTP Bank provided the payment portal.

Project Details

Objective

To provide users of www.dejandozet.com with simple and secure online card payment options, along with flexible payment methods and professional data processing.

Key Features

• Pricing Page: Dynamic fetching of products and prices from a web API using JavaScript.
• Cart Updates: Using local storage for data saving without a database.
• Checkout Page: Collecting user input, payment method selection, and validation.
• Payment Integration: PHP scripts for data processing and redirection to the bank's payment portal.
• Payment Status Display: HTML and JavaScript page for status updates, with backend PHP processing and email notifications.
• Custom Design: Responsive page design using Bootstrap 5 CSS.
• IPM Compliance: Display of available cards, terms of service, privacy policy, and bank testing.

Technologies Used

• JavaScript Programming Language: Dynamic data fetching, validation, and cart updates.
• PHP Programming Language: Backend data processing and bank portal integration.
• Bootstrap 5: Responsive user interface design.
• HTML/CSS: Pages for displaying information and payment status.
• SQL Programming Language: on MariaDB database 

My Impressions of the Project

Working with the bank's team responsible for this service was excellent, though there were challenging moments. Especially towards the end when they mentioned not being able to see the pricing page, which happened because their security system blocked the script loading the products. I decided to move the script from a subdomain to the website's domain, and it worked.