Мой расчет суммы PayPal на моем сайте не синхронизируется с общей ценой.Расчет количества клиентов, умноженный на стоимость поездки.Здесь общая цена отображается внутри части дисплея, а в PayPal не отображается правильная сумма.
это bookinfo.php
<!DOCTYPE html>
<html>
<head>
<title>BOOKING INFORMATION | E-Diving</title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Modak&display=swap" rel="stylesheet">
</head>
<body>
<ul>
<li><a href="homepage.php">HOME</a></li>
<li><a href="">ABOUT</a></li>
</ul>
<h1>BOOKING INFORMATION</h1>
<form class="field" method="post" action="booktest.php">
<fieldset>
<legend>Personal Details: </legend>
<br>
<select name="trip" id="tripA">
<option name="trip" value="140.00">Trip Package A</option>
</select>
<br>
<br>
Name: <input type="text" name="fname" placeholder="Full Name" required>
<br>
<br>
Email: <input type="text" name="email" placeholder="example@example.com" required>
<br>
<br>
Phone:<input type="tel" name="phone" placeholder="0123456789" required>
<br>
<br>
<p>Country: <select name="country" id="country" required>
<option name="country">--</option>
<option name="country">MALAYSIA</option>
<option name="country">UNITED STATES</option>
<option name="country">UNITED KINGDOM</option>
</select> </p>
<br>
<p>Do you know Swimming ?</p>
<input type="radio" name="swimming" value="yes" id="name" required>YES
<br>
<br>
<input type="radio" name="swimming" value="no" id="email" required>NO
<br>
<br>
Choose your Date: <input type="date" name="date" min="2019-01-01" id="no_phone" required>
<br>
<br>
No. Customers: <input type="number" id="number" name="numbercus" min="1" max="100"
onchange="computetotal()" required>
<br>
<br>
<p>Do you have swimming suits?</p>
<input type="radio" name="suits" value="yes" required>YES<br><br>
<input type="radio" name="suits" value="no" required>NO
<br>
<br>
<p>Level of Certificate :</p>
<input type="radio" name="certificate" value="recretional" required>Recretional Scuba Diving
Certification Levels.<br>
<br>
<input type="radio" name="certificate" value="professional" required>Professional Scuba
Diving Certification Levels.
<br>
<br>
<p>Do you need a guide?</p>
<input type="radio" name="guide" value="yes" required>YES<br><br>
<input type="radio" name="guide" value="no" required>NO
<br>
<br>
Total Amount is : <p2 id="total_payment" name="amount" onchange="computetotal()"></p2>
</fieldset>
<br>
<br>
<input type="submit" name="book" value="Continue...">
</form>
<div class="footer">
<p>© Copyright 2019 e-Diving. All Rights Reserved.</p>
</div>
<script>
function computetotal(){
var number = document.getElementById('number').value;
var amount = (number * 140.00);
document.getElementById('total_payment').innerHTML = "MYR "+amount;
}
</script>
</body>
<style>
.footer {
object-position: bottom;
text-align: end;
left: 0;
bottom: 0;
width: 100%;
background-color: #B8C4BB;
color: #4C243B;
text-align: center;
font-family: 'Modak', cursive;
}
h1 {
font-family: 'Bungee Outline', cursive;
text-align: center;
margin-top: 20px;
font-size: 70px;
color: #3A506B;
}
body {
height: 110vh;
margin: 0;
padding: 0;
font-family: 'Product', sans-serif;
background-image: linear-gradient(120deg, #6B7FD7, #BCEDF6, #EAF8BF, #99DDC8, #F9CFF2, #A9FBD7);
background: cover;
}
.field p {
font-size: 19px;
}
.field input[type="radio"],
.field input[type="text"],
.field input[type="number"],
.field input[type="date"] {
font-size: 14px;
}
fieldset {
background-color: #A4BAB7;
font-weight: bold;
font-family: 'Archivo Narrow', sans-serif;
color: #533E2D;
font-style: oblique;
font-size: 19px;
border-radius: 20px;
}
.field {
margin-right: 10px;
}
legend {
text-decoration: underline;
text-align: center;
font-size: 21px;
font-family: 'Patua One', cursive;
}
.field input[type="submit"] {
border: 0;
background: #4C243B;
display: block;
margin: 20px auto;
text-align: center;
border: 3px solid #07FEDE;
padding: 14px 60px;
width: 200px;
outline: none;
color: white;
border-radius: 25px;
transition: 0.6s;
cursor: pointer;
color: cornflowerblue;
font-weight: bolder;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.field input[type="submit"]:hover {
background: #DCD6F7;
color: #151E3F;
font-family: 'Raleway', sans-serif;
}
head {
display: flex;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #EDF7F6;
position: fixed;
top: 0;
width: 100%;
position: fixed;
font-weight: lighter;
}
li {
float: left;
}
li a {
display: block;
color: #352208;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: lighter;
}
li a:hover:not(.active) {
background-color: #FAE8EB;
color: #1F2041;
}
.active {
background-color: #CC7E85;
transition: 1s;
}
</style>
</html>
это мой платеж140.php
<html>
<head>
<title>e-Diving | Checkout </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Modak&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<ul>
<li><a href="homepage.php">HOME</a></li>
<li><a href="">ABOUT</a></li>
</ul>
<h1>Checkout here!</h1>
<div class="tripA" action="/">
<img src="img/Tripa-rm140.jpg" value="140">
<br>
<p2 style="text-align:center;">TRIP PACKAGE A </p2>
<br>
<br>
<fieldset id="write" onchange="processForm()">
<legend>Overview before Checkout</legend>
<br>
<br>
<p1 id="name"></p1>
<br>
<br>
<p1 id="email"></p1>
<br>
<br>
<p1 id="number"></p1>
<br>
<br>
<p1 id="country"></p1>
<br>
<br>
<p1 id="date"></p1>
<br>
<br>
<p1 id="customer"></p1>
<br>
<br>
<p1 id="knowledge"></p1>
<br>
<br>
<p1 id="guide"></p1>
<br>
<br>
<p1 id="total_payment" name="amount"></p1>
</fieldset>
<br>
<br>
<div id="paypal-button-container" style="text-align:center;"></div>
<br>
</div>
<script>
function computetotal() {
var number = document.getElementById('number').value;
var amount = (number * 140.00);
document.getElementById('total_payment').innerHTML = "Total Payment is MYR " + amount;
}
</script>
<script src="https://www.paypal.com/sdk/js?client-
id=AcdxjtykHGTsvpimYEyMKaRd6lNJ3mb69qbD9ootKMWArJafq-xD_yCCLAR9MLmPPLvpgt1WzH1CJhu-"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
label: 'computetotal',
amount: {
value: '140.00',
currency: 'MYR',
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
window.location.replace("invoice.php");
return fetch('/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
});
});
}
}).render('#paypal-button-container');
</script>
<div class="footer">
<p>© Copyright 2019 e-Diving. All Rights Reserved.</p>
</div>
</body>
<style>
* {
box-sizing: border-box;
}
body {
height: 200vh;
margin: 0;
padding: 0;
font-family: 'Product', sans-serif;
background-image: linear-gradient(120deg, #6B7FD7, #BCEDF6, #EAF8BF, #99DDC8, #F9CFF2);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #EDF7F6;
position: fixed;
top: 0;
width: 100%;
position: fixed;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
li {
float: left;
}
li a {
display: block;
color: #352208;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #FAE8EB;
color: #1F2041;
}
.active {
background-color: #CC7E85;
transition: 1s;
}
h1 {
font-family: 'Bungee Outline', cursive;
text-align: center;
margin-top: 20px;
font-size: 90px;
color: #3A506B;
}
.paypal {
text-align: center;
font-size: 14px;
}
.paypal img {
width: 90px;
height: 60px;
}
#card-button-container button {
padding: 12px 14px;
background-image: linear-gradient(120deg, #E5ECF4, #EFF2C0);
font-size: 20px;
font-family: 'Chilanka', cursive;
border-radius: 40px;
}
#card-button-container button:hover {
padding: 12px 14px;
background-image: linear-gradient(120deg, #FFE1A8, #E26D5C);
font-size: 20px;
font-family: 'Chilanka', cursive;
border-radius: 40px;
transition: 0.9s;
}
.tripA img {
display: block;
width: 400px;
height: 300px;
margin-left: 560px;
}
p1 {
text-align: center;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
color: #494850;
font-weight: bold;
}
.input-fields {
display: flex;
justify-content: space-between;
}
.input-fields label {
display: block;
margin-bottom: 10px;
color: #b4b4b4;
}
.info {
font-size: 12px;
font-weight: 300;
display: block;
margin-top: 50px;
color: #141414;
font-size: 12px;
}
div[class*='column'] {
width: 382px;
}
input[type='text'],
input[type='password'] {
font-size: 16px;
width: 100%;
height: 50px;
padding-right: 40px;
padding-left: 16px;
color: rgba(46, 46, 46, .8);
border: 1px solid rgb(225, 225, 225);
border-radius: 4px;
outline: none;
}
input[type='text']:focus,
input[type='password']:focus {
border-color: rgb(119, 219, 119);
}
#date {
background: url(img/icons_calendar_black.png) no-repeat 95%;
}
#cardholder {
background: url(img/icons_person_black.png) no-repeat 95%;
}
#cardnumber {
background: url(img/icons_card_black.png) no-repeat 95%;
}
#verification {
background: url(img/icons_lock_black.png) no-repeat 95%;
}
#card-button-container input {
background-color: #FFFFFF;
font-size: 14px;
color: #484A47;
}
#card-button-container label {
color: #141414;
font-size: 14px;
}
#card-button-container {
background-image: linear-gradient(90deg, #D2F1E4, #FBCAEF);
padding: 100px 200px;
border-radius: 30px;
}
#card-button-container p1 {
font-family: 'Acme', sans-serif;
font-size: 50px;
text-decoration: underline;
top: 12%;
color: #F02D3A;
}
.footer {
position: fixed;
background: cover;
left: 0;
bottom: 0;
width: 100%;
background-color: #B8C4BB;
color: #4C243B;
text-align: center;
font-family: 'Modak', cursive;
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
.form-row input[type="text"] {
color: #EFF2C0;
}
</style>
</html>