Figure $3.$ A professional way for nav design in smartphone view

B$.$ Page $2,$ pay.html: A page to accept user's credit card details. An example is shown in Figure $4.$

The intention behind the web page is that a user will put in their credit card details. The user will then click on "Continue" and the credit card number $($in this case, "Mastercard"$)$ will be checked by a JavaScript code. Amongst other things this JavaScript code will check $(1)$ the total number of entered digits for credit cards is $16,$ and $(2)$ the MasterCard number starting with $51,52,53,54,$ or $55,(3)$ the card is not expired, $(4)$ the total number of digits for security code is $3$ or $4.$ If the JavaScript check is unsatisfied, users are asked to re$-$fill in the form. On passing validation, use JavaScript to send a POST request to the server $($

mudfoot.doc.stu.mmu.ac$.$uk$/$node$/$api$/$creditcard$).$ The server expects raw JSON to be sent in the following format

$1$

"master$\_$card": $5222123412341234,$

"exp$\_$year": $2025,$

"exp$\_$month": $11$

$"$cvv$\_$code": $"089"$

$\}$

Make sure that your JavaScript can handle errors coming back from the server $($e$.$g$.,$ if the wrong data is sent$).$ This is another layer of validation.

On success $(200$ OK from the server$),$ parse the response and provide a success message to the user. $\{$

"message": "Thank you for your payment."

$\}$

Please Note: you must complete the card checking using JavaScript. No mark is awarded for using other programming languages.

Page $5$ of $11$

WEB DEVELOPMENT: Assessment Specification

My Bookshop

About Us

Contact Us

Payment Options

Figure $4.$ an example of pay.html in desktop view

C$.$ Page $3,$ success.html: A page to offer feedback if the payment is successful. An example is shown in Figure $5$

Please note that 'success.html$\text{'}$ also returns the last four digits of the credit card number which had been input by the user, in the form $"************{1234}^{\text{'}\text{'}},$

My Bookshop

You have successfully entered your credit card details

$34$

The following directory structure is to be used for all the files of your website: root folder index.htm$/$ pay.htm$/$ success.htm$/$

js folder

All JavaScript codes

Page $6$ of $11$