Checkout

<!-- Add meta tags for mobile and IE --> <meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body.debug div {
outline: 1px solid orange;
}

body.debug div:hover {
outline: 1px solid maroon;
}

body.debug div.well {
outline: none;
}

body.debug iframe {
outline: 2px solid green;
}

/* overwrite some bootstrap values - start */
.panel {
background-color: transparent;
}
/* overwrite some bootstrap values - end */

#pppIframe {
position: absolute;
z-index: 100;
}

@keyframes rotateThis {
from { transform: rotate( 0deg ); }
to { transform: rotate( 360deg ); }
}

button.infamous-continue-button span.glyphicon {
display: none;
}

button.infamous-continue-button.loading span.glyphicon {
display: inline-block;
margin-right: .5em;
animation-name: rotateThis;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#sessionInfo, #sessionInfoDrawer {
background-color: rgba(0, 0, 0, 0.75);
color: white;

position: fixed;
right: 5%;
}

#sessionInfo {
top: 30px;
z-index: 10;

display: block;
width: 90%;
height: 90%;

border-radius: 15px 0 15px 15px;

overflow: auto;
}

#sessionInfoDrawer {
top: 0;
z-index: 11;

display: block;
width: 200px;
height: 30px;

border-bottom-width: 0;

cursor: pointer;
text-align: center;
line-height: 30px;
vertical-align: middle;
}

#sessionInfoDrawer:hover {
color: yellow;
}

#sessionInfoDrawer.closed {
border-radius: 0 0 15px 15px;
border-bottom-width: 1px;
}

#sessionInfoDrawer.closed + #sessionInfo {
display: none;
}

#sessionInfo > div {
margin: 10px;
}

#sessionInfo dt {
display: block;
width: 300px;
padding-right: 5px;

float: left;
clear: left;
text-align: right;
}

#sessionInfo dd {
padding: 2px;
border-radius: 5px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre;
font-family: monospace;
}

#sessionInfo dt:hover + dd, #sessionInfo dd:hover {
padding: 2px;
background-color: rgba(255, 160, 0, 0.5);

}

#sessionInfo h2 {
width: 300px;
padding-right: 5px;
text-align: right;
margin-bottom: 10px;
border-right: 1px solid white;
border-bottom: 1px solid white;
}

#sessionInfo dl + h2 {
margin-top: 1em;
}

.navbar-style {
background-color: white;
height: inherit;
width: inherit;
}

.navbarbright-style{
background-color: #009cdf;
height: inherit;
width: inherit;
}
.vertical-center-enabled .page-header-content-wrapper {
align-items: end;
justify-content: flex-end;
}

title{
font-family: "Helvetica Neue";
}

button{
font-family: "Helvetica Neue";
}

label{
font-family: "Helvetica Neue";
color: #949494;
}
.submit-btn{
background-color: #58bc95;
font-weight: bold;
color: white;
border: none;
}

.header-img{
position: relative;
height: inherit;
width: 100%;
}

.header-icon{
max-width: 100px !important;
margin-top: -5%;
}
.header-icon-gen{
max-width: 100px !important;
margin-top: -7%;
filter: sepia(100%);
-webkit-filter: sepia(100%);
}


.ml-1{
margin-left: 15%;
z-index: -1;
}

.header-span {
position: absolute;
font-weight: bold;
color: white;
max-width: 10% !important;
margin-top: -2%;
margin-left: 3%;
}
.btn-copy{
margin-right: 0%;
}

#result{
display: none;
}

#paypal-button-container {
text-align: center;
height: 100%;
padding-right:23%;
padding-left: 23%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>// <![CDATA[
function getQueryVariable(query, variable){
var dec = atob(query);
var vars = dec.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
$(document).ready(function(){
var query = window.location.search.substring(1);
if(query && query.length > 0){
// TODO: add your own client id. Can be found on developer.paypal.com
var clientId = "AQDWObUdKqyAnb_ug37Im3Wz3S5UBe5OV6VERtpnO38pGksPcinSV1RJtPPDBkg4PbTGskhWKUDnlqLP";
var x=getQueryVariable(query, "amount");
document.getElementById("amt").innerHTML = parseFloat(x).toLocaleString('pt-br',{style: 'currency', currency: 'BRL'}).replace("BRL","");

var a= getQueryVariable(query, "currency");
var y= 'https://www.paypal.com/sdk/js?currency=BRL&client-id=' + clientId;

var t = getQueryVariable(query, "id");
document.getElementById("obs").innerHTML = t;

var script = document.createElement( 'script' );
script.src = y;

// TODO: add data-partner-attribution-id. Provided by your Account/Relationship Manager
script.setAttribute("data-partner-attribution-id", "DonaNina_Cart");
document.getElementsByTagName('head')[0].appendChild(script);

script.onload = function() {
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
description: getQueryVariable(query, "id"),
amount: {
value: getQueryVariable(query, "amount").replace(',', '.')
}
}]
});
},

// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Pagamento realizado por ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
};
}
});
// ]]></script>
<div class="navbar navbar-static-top navbarbright-style"></div>
<br /> <br />
<div class="container" style="width: 100% !important;">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 my-auto">
<p style="text-align: center;">Valor a pagar</p>
<h2 style="font-weight: bold; text-align: center;"><span id="amt"></span> <span id="currency"></span></h2>
<br />
<h5 style="color: #b8b8b8; text-align: center; margin-top: 0px;">Observações: <span id="obs"></span></h5>
<div id="paypal-button-container"></div>
</div>
<div class="col-md-4"></div>
</div>
</div>