Please read this text to the very end before you start working.
Main evaluation criteria: 1
Task: 1
Description: 1
Criteria of data saving 2
Expected result: 2
Please, pay attention: 3
👉We suggest completing the task in the following sequence👈: 3
Faq: 4
ADDING A CREDIT CARD (USER STORY) 4
CREDIT CARDS DROP DOWN MENU (USER STORY) 5
VIEWING CREDIT CARDS IN THE WP ADMIN PANEL (USER STORY) 5
Terms used: 6
Deadlines for reviewing your work 6
Deadlines for completing the test task 7
Link to this document 7
Main evaluation criteria:
1. The backend is evaluated, not the frontend.
2. The way you think about solving the problem is evaluated = your proposed development plan and screen recording, how quickly you can do it and what paths you use to achieve the result.
3. The code is evaluated, how you format it.
Task:
Setup a secure way to save user credit cards info on WordPress Site
Description:
We have a site on Wordpress which should be able to store linked from 1 to 99 (on average 10) user credit cards info (first name, last name, month, year, payment system token, and safe card number with **** (something like that 5103 **** **** 6071)). The site then will charge each of these cards a subscription fee 1$ per month. All of the cards should be shown in a personal profile in a grouped way (a group for success or failed cards), like this.
https://drive.google.com/file/d/1qMbNAMKNj8F2K6jTHAaXe8cSoecP36Hw/view?usp=sharing
When you click on a card with a "green" status = payments were made in the next month = a list of the corresponding cards opens under it. Example:
https://drive.google.com/file/d/1bgiGKGzbA4KaI6TlV0AuKG3PMgt47ZwH/view?usp=sharing
When the user clicks on the numbers, underline, or the pencil itself, the user can set a nickname for the card. This is the area:
https://drive.google.com/file/d/1Aw7eVjJ_ztpl7X31vm6e6FgAuzyitm0O/view?usp=sharing
What you should do now
All cards should be linked to the user who added them, and couldn’t be seen by other users.
The role of all uses should be default: subscriber.
All cards should be seen in the admin area (in WP admin panel for site administrator) with the status of subscription (1 = ок, 2 = warning, 3 = error) and statistics (in future), ideally without or with minimum coding.
Criteria of data saving
All cards should be linked to the user who added them, and couldn’t be seen by other users.
The role of all uses should be default: subscriber.
All cards should be seen in the admin area (in WP admin panel for site administrator) with the status of subscription (1 = ок, 2 = warning, 3 = error) and statistics (in future), ideally without or with minimum coding.
All cards should be able to edit (1. the ability to click on the card numbers and enter a nickname for the card 2. the ability to click on the month and year of the card and enter them manually (the payment system does not return this data and the user can enter it manually)) via frontend interface (frontend editing is custom, but the way the data is saved should allow doing this).
There should be a way to know which card to charge (system must remember the date of last charge (the history of charges is saved and when you click on a specific card, the last 12 charges from the card are displayed)) and be able to find all the cards which should be charged today.
Expected result:
In up to five hours you should propose (give a text description how you think this should work) a way to store all the info that was mentioned and write a base implementation of storage, which should be able to qualify to all of the requirements in the future, and the first three criteria for now. The data storage should be easily expandable (each person is supposed to have no more than 99 credit cards, and there can be 20k or 20m users) and maintainable.
Please, pay attention:
We only pay for the time your screen is recorded, you won’t be paid if you spend more than five hours on this task, so if you don’t have enough time to write a full code implementation, give a text explanation how you would achieve the result.
👉We suggest completing the task in the following sequence👈:
Get WP and FTP login passwords, domain address from us
Tell Alena the IP address that needs to be given access to make changes via FTP
The tasks will be performed with a connected (active) payment system and a working system of writing off (debiting) money from a credit card in the amount of 1 cent of US dollars ($0.01 US).
To work on the project, it is advisable for you to create a virtual bank card in the amount of 7 cards, with a balance of 2 cents of US dollars ($0.02 US).
Turn on your screen recording.
Write a plan for completing this task (code design = your idea of how you will complete this task, what logic you will implement).
Start writing code.
Create 2 users with the subscriber role.
Add user 1 = 7 credit cards
3 cards with green status
2 cards with yellow status
You can come up with the criteria for what yellow and red status is yourself, or simply number the status 1, 2 and 3 in the database tables
2 cards with red status
Add user 2 = 8 credit cards
4 cards with green status
3 cards with yellow status
1 cards with red status
Provide us with a video recording of your screen (for example, a link to Google Drive).
Write to Alyona in WhatsApp that we can check your work (https://wa.me/4917620178190 ).
Send Alena your Gmail so that she can give you the right to comment on the document specified in paragraph 6.
Please, in the "Status" column next to your subdomain, indicate "Yes" when we can check your work https://docs.google.com/document/d/1m3tUQN9Av9R5sQZz_c0mzlP21eD01sWCSshfdEklyI8/edit?usp=sharing
Faq:
How are the cards added on site?
The cards are added to the site via payment gateway (if needed https://api.monobank.ua/docs/acquiring.html ), which sends back non-sensitive info: safe card number, status of transaction, payment token.
What card info will be stored?
(see section below "VIEWING CREDIT CARDS IN THE WP ADMIN PANEL")
In general terms, site will store a safe card number, payment token, date of last attempt to charge a subscription fee, card label, year and month of issuing the card, payment gateway (there will be multiple payment gateways), maybe some other info in the future.
How will frontend editing be implemented?
Frontend editing will be implemented using custom Wordpress theme, and some php, js and css code logic.
How many groups of cards will be displayed?
There will be three groups of cards: success (green), fail (red), and soon expire (yellow).
Is there an example of how data is returned via payment gateway?
Yeah, you can take a look here https://pastebin.com/WW8HeFzy
—
ADDING A CREDIT CARD (USER STORY)
🟩Successful user story🟩:
Precondition: Login should work through Google, if it doesn't work, then =>Login to your subdomains (if) is not authorized in Google and Apple, for this reason, please log in as administrators through the WP admin panel
1. User clicked "plus" = add card
2. Entered correct card details
3. Card was debited ($0.01)
4. Card appeared in the list of cards (user's main screen)
5. Card appeared in WP admin panel and is available for viewing by WP administrator (user has subscriber status upon registration and retains subscriber status all the time)
🟨User story of yellow credit card status🟨:
1. Add card as a record in the database
2. Card assigned second status, which is different from green and red = yellow
3. Card appeared in the list of cards with a red circle (user's main screen)
4. Card appeared in WP admin panel and is available for viewing by WP administrator (user has subscriber status upon registration and retains subscriber status all the time)
🟥Negative user story🟥:
1. Add card as a record in the database
2. Card assigned third status, which is different from green and yellow = red
3. Card appeared in the list of cards with a red circle (user's main screen)
4. Card appeared in WP admin panel and is available for viewing by WP administrator (user has subscriber status upon registration and retains subscriber status all the time)
—
CREDIT CARDS DROP DOWN MENU (USER STORY)
Successful user story
Precondition: The cards on the main screen show only three cards, which are a connecting image of three card statuses (green, yellow, red). According to the number of credit cards corresponding to the green color, there is a number in the green circle (if the number 10 is indicated in the green circle, this means that the user has 10 credit cards added with the green status).
1. The user clicks on the area of the card, which has a circle with a color (green, yellow, red) in the upper right
2. A drop-down menu of cards that correspond to this category appears under this card
VIEWING CREDIT CARDS IN THE WP ADMIN PANEL (USER STORY)
Successful user story
Pre-condition: the administrator logs into the WP admin panel.
1. The administrator sees users' credit cards
2. The administrator can select 1 user and view credit card data only for this user
The administrator sees all fields that correspond to the card:
Account details
Data received during registration (and possibly added or modified later)
+user email
The user can enter during the process of using the application
+user nickname
The data is linked to the CC and may differ in each CC.
Data that the user will enter if they want (optional)
+credit card month
+credit card year
+credit card nickname
+user first name
+user last name
Data that the user will enter/chooses always (mandatory)
+payment gateway (there will be multiple payment gateways)
Data received (returned) from the payment system (!!! in terms of a specific card !!!)
card token
+transaction ID (identification code) [tranId]
+confirmation code [approvalCode]
+additional transaction code [rrn]
+encrypted card number [maskedPan]
The data we collect in the database (!!! in terms of a specific card !!!)
+date of last attempt to charge a subscription fee
+each of the payments made over the last 12 months and their status
date and time of attempt
code returned by the server