Build a Paypal Payment Gateway Integration Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
    <link rel="stylesheet" href="../../assets/css/Payment-integration-gateway/style.css ">
    
</head>
<body>
   
    
    
    <div class="whole">
        <div class="heading">
            <h2>Welcome!</h2>
        </div>
        <div class="mssg">
            <p> Welcome to Siddhi Bhanushali's Donating Page</p>
        </div>
        <div class="btn">
            <a href="details.html" ><button type="button">DONATE HERE</button></a>
            <blockquote><em style="font-size: 20px;"> "Remember that the happiest people are not those getting more, but those giving more"</em></blockquote>
        </div class="contact">
        <p>Contact us:<br>
            Email:info@donationhub<br>
            phone:+22 2244 5509<br>
        </p>
    </div>   
    
</body>
</html>

 

 

details.html

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Personal Details</title>
    <link rel="stylesheet" href="../../assets/css/Payment-integration-gateway/detail.css">
</head>
<body>
        <div class="heading">
            <h2>Please fill out everything mentioned below</h2>
        </div>
<div id="smart-button-container">
    <div style="text-align: center"><label for="description">Cause for donation </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
      <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
    <div style="text-align: center"><label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
      <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
    <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
      <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
    <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
  </div>
  
  <script src="https://www.paypal.com/sdk/js?client-id=AVCsGN2iL0JJFuo1Vu5TNVMJPCbCRQG1iIjVxvuvNFmRJnxyKg9xpVsx_ZcUrdZU-fDy28LJD1GSlS5v&currency=USD" data-sdk-integration-source="button-factory"></script>
  <script src="../../assets/js/Payment-gateway-integration/payment.js"></script>
  
</body>
</html>

 

 

style.css

 

 

html{
    background-image:url("https://image.freepik.com/free-vector/gradient-geometric-background_23-2148809183.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    width:100%;
    height:100%;
}
.heading{
    font-family:'Segoe UI', Tahoma,  Verdana, sans-serif, cursive;
    text-align:center;
    font-size:30px;
}
.heading h2{
    margin-top:5%;
    margin-top:10px;
    text-align: center;
}
.mssg{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, cursive;
    text-align:center;
    margin-bottom:30px;
    font-size: 20px;    
}
button:hover{
    background-color:pink;
}
button{
    border-radius: 50px;
    padding:8px;
    border:3px solid black;
   

}
.contact{
    font-size: cursive;
}
.btn{
    margin:0;
    position:relative;
    top:100%;
    margin-bottom:20px;
    text-align: center;
}
.whole{
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    background-color: skyblue;
    border-radius: 50px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );   
    position:absolute;
    left:40%;
    padding: 70px 0;
}
body{
    position: absolute;
    padding: 160px 0;
    left:17%;
    width:50%;
}

 

See also  Node.js Express Domain or Website XML Sitemap Generator Online Tool Website Deployed on Website + Source Code 2020

 

details.css

 

 

body{
    background-image:url("https://image.freepik.com/free-vector/comic-style-background_23-2148827394.jpg");
    background-size:cover;
    text-align:center;
}
body{
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    
    border-radius:30px;
    border: 1px solid rgba( 254, 254, 254, 0.18 );
    width:55%;
    position:absolute;
    margin-top:180px;
    margin-left:370px;
    align-items:center;
}
.heading{
    text-align:center;
    font-family:"Brush Script MT", cursive;
    font-size: 20px;
    
}
.mssg{
    margin-left: 100px;
    margin-bottom:30px;
    font-family:"Brush Script MT", cursive;
    font-size: 20px;
}
input{
    border-radius: 10px;
    border: 1px solid black;
    padding: 5px 100px;
}
button{
    border-radius: 50px;
}
.btn{
    position:relative;
    left:28%;
    margin-bottom:20px;
    margin-top:20px;
}
button:hover{
    background-color:rgb(23, 205, 231);
}
#smart-button-container input:hover{
    background-color: #eabf9f;
}

 

 

script.js

 

 

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', e => {
    e.preventDefault();

    checkInputs();
});

function checkInputs() {
    // trim to remove the whitespaces
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if (usernameValue === '') {
        setErrorFor(username, 'Username cannot be blank');
    } else {
        setSuccessFor(username);
    }

    if (emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Not a valid email');
    } else {
        setSuccessFor(email);
    }

    if (passwordValue === '') {
        setErrorFor(password, 'Password cannot be blank');
    } else {
        setSuccessFor(password);
    }

    if (password2Value === '') {
        setErrorFor(password2, 'Password2 cannot be blank');
    } else if (passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords does not match');
    } else {
        setSuccessFor(password2);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

Leave a Reply