Developer Guide
YaPay aims to provide e-commerce owners with an easy-to-implement payment gateway without fees, based upon the Yape app by BCP. The gateway can be inserted into the seller's page and configured easily so that a Yapero can pay any order through Yape just by scanning a QR code. This project consists of developing a dummy online shopping platform and a dummy Yape App that provide these functionalities.
- On the payment section of the website, a Yapay button will be in place. When clicked, a QR containing the details of the purchase will be generated and displayed along with a small guide for the shopper on how to pay. All of this is contained in a widget that is inserted in the e-commerce website. The widget was done with Vue, and receives a JSON Web Token from the backend that is then turned into a QR. This feature was done by Arturo Cuya with some help from Camila Fernandez.
- On the main screen of the app, there is button that open the phone camera to scan a QR code. If the scan is successful, the app will redirect the user to the confirm payment page. The QR Scanner was done with the BarcodeScanner plugin for NativeScript. This feature was done by Guillermo Franco and Alessia Yi.
- On the app, after the QR code is scanned, the app will decrypt the JSON Web Token and then display the name of the company where the shopper is buying from along with the amount to pay. Below, there will be a button to confirm the payment. When clicked, the transaction via Yape will start and it will send a GET request to the website so it knows the payment was confirmed. This feature was done by Alessia Yi and Guillermo Franco.
- On the app, after the QR is scanned, the user has the option to deny the payment with the back button. This feature was implemented by Alessia Yi and Guillermo Franco.
- Data of each transaction will be stored in a database. Each week the payments will be collected and send to the Yape team handler.
Camila Fernandez: Product list
- v1.2: Show list of products with descriptions and pictures, no need of visually appealing design. Add simple button.
- v1.3: Visually appealing design with item counter scrolling bar so that a user can buy more than one product at once.
Camila Fernandez: Cart with products
- v1.2: Make cart responsive to buttons in “List of products”. Show products with descriptions and pictures, quantity, total and “Pay with Yape” button design. No need of appealing design.
- v1.3: Appealing design
Arturo Cuya: Pay with Yape button, QR pop-up and confirmation/decline of pay
- v1.2: Only one (dummy) seller can use this feature. A JS script is generated and it can be pasted within the seller’s webpage code. This script takes the order id and the price as parameters and shows up the QR pop-up so the buyer can scan it. After the scan, a confirmation and success/failure view shows up.
- v1.3: Any seller can use this feature. The connection between the seller’s e-commerce and YaPay is configured inside a dashboard, as well as the button script generation.
Andrea Velasquez: QR
- v1.2: Based on the seller information (such as name to be display in the app after scanning QR and Yape account) and order’s total amount, a QR is generated. Since this version doesn’t include encryption, any camera is able to scan and get this information from the QR.
- v1.3: When user scans the QR and confirms payment, confirmation page appears on website.
- v1.4: QR is encrypted and can only be scanned and decoded with the Yape QR scanner. If user doesn’t scans the QR in a specific amount of time (5 minutes), it expires and becomes invalid.
Camila Fernandez and Andrea Velasquez: Database
- v1.2: Database design(Entity-Relation and relational map)
- v1.3: Functions to create, delete and modify database objects
- v1.4: Indexation and adding functions to Postgres
Guillermo Franco and Alessia Yi: Error handling
- v1.2: App has the "Phone shuts down mid-confirmation", "Phone shuts down before confirmation" and "QR scanned fail" errors handled.
- v1.3: App has the "Bank non-responsive" and "Seller account blocked" errors handled.
Arturo Cuya: Data report to Yape
- v1.3: Yape can get a weekly/monthly report of how many people buy with YaPay, how often and the money they spend.
Alessia Yi: Main screen with QR button
- v1.2: Place QR button that will open camera, place non-functional buttons of pay, charge, show balance
- v1.3: Design where the buttons and information will go (choose colors, font, size, etc)
Guillermo Franco: Open camara
- v1.2: App will be able to access the camera function with the press of a button. Will need camera permission.
Guillermo Franco: Confirmation
- v1.2: After reading the QR code, the app will be able to display a page with the amount to be paid asking for confirmation. After the user confirms the payment, it will show a payment confirmation.
Alessia Yi: QR scanner
- v1.2: Camera should read QR information
- v1.3: After reading and validating the QR redirection to a page where the amount to pay is showed
Alessia Yi: Order's total amount
- v1.2: Tab that will show a random amount of money to pay, the company name and a nonfunctional pay button
- v1.3: Amount showed is linked to the QR information and a pay button will make a transaction validating it with a JWT
Note: In SpringBoot, controllers and services are implicit singletons. A Spring singleton is different from the singleton pattern. This is explained in the Glossary section.
The payment component contains information about a transaction (total price and the E-commerce name to be displayed on the Yape App). It is created when the online shopper clicks on the "Pay with Yape" option. Consequently, the payment object can be an incomplete transaction (where online shopper has not payed yet).
The Data Report Scheduler component starts a scheduled task every day at midnight. It collects all confirmed payments of the day before, creates the Data Report and sends it to the Yape Handler.
The Data Report component contains a list of payments to be send and the datetime it was created.
The company associated with the e-commerce
- I don't understand the word x: Check the glossary section above.
- Where can I find each version feature? In the Features by Version section, or in this same page.
- How does the Yapay backend work? Here, in the Developer Guide check the architecture design. Still curious? All the Design section provides information about components shown in the architecture.
- How does Yape Pay look?: You can check the mockup here
- Springboot: Java Framework used to create microservices.
- Spring bean: A bean is an object that is instantiated, assembled, and otherwise managed by a Spring IoC container Springboot documentation.
- Spring IoC: Spring Inversion of Control. In Spring, is the core that manages objects from classes across the application and creates its dependencies.
- E-commerce: Is the buying and selling of goods or services using the internet, and the transfer of money and data to execute these transactions.
- Subcomponents of each object of the YaPay backend:
- Controller: The API to interact through HTTP requests with the object
- Data Access Service (DAS): This class implements the DAO interface to read and write into the object's table inside the database
- Data Access Object (DAO): This interface abstracts and declares the methods that the DAS will use
- Model: The raw class of the object, with its attributes and methods
- Service: This class acts as an intermediate between the DAS/DAO and the controller of the object
- Singleton Pattern: Software design pattern where an object can be only instantiated once per class.
- Spring Singleton: Concept used in the Spring Framework to refer to a class that can only have an instance per container and bean. This is the key difference with the Singleton Pattern. For a more detailed information, click here.
- JWT: Stands for JSON Web Token. It is a secure way of sending and receiving JSON data by including a digital signature. This signature allows to verify if the senders are who they say they are. For more information, click here