Hello friends I have the following code
here my html:
<form method="post" id="shoppingcart_form" class="form-horizontal">
<input name="currency" id="currency" value="USD" type="hidden">
<input type="hidden" class="form-control" name="amount" id="amount" placeholder="Monto" value="<?php echo $generalTotal;?>">
<input type="hidden" class="form-control" name="description" id="description" placeholder="Descripcion" value="Pack Test">
<input type="hidden" class="form-control" name="orderid" id="orderid" placeholder="OrderId" value="<?php echo $TransactionsBookingNumber?>">
<input type="hidden" class="form-control" name="documento" id="documento" placeholder="Documento" value="<?php echo $cardnetReference?>">
<input type="hidden" class="form-control" name="uniqueid" id="uniqueid" placeholder="" value="<?php echo $cardnetReference?>">
<input type="hidden" class="form-control" name="taxableAmount" id="taxableAmount" placeholder="" value="00.00">
<input type="hidden" class="form-control" name="invoice" id="invoice" placeholder="" value="<?php echo $TransactionsBookingNumber?>">
<input type="hidden" name="isFinalConsumer" id="isFinalConsumer" checked="checked">
<input type="hidden" name="capture" id="capture" checked="checked">
<input type="hidden" name="PWToken" id="PWToken">
<input type="hidden" name="IsCommerceToken" id="IsCommerceToken" value="0">
<br>
<!-- /.col -->
<div class="col-12 text-left" style="margin:20px">
<button type="button" class="btn btn-success procesarbtn" id="btnCheckout" style="margin-bottom:10px" style="font-size : 20px;">Procesar</button>
<button type="button" class="btn btn-danger" onclick="GBackCheckout()" style="margin-right: 5px;margin-bottom:10px" class="close" data-dismiss="modal" autocomplete="off"><i class="fa fa-times" aria-hidden="true"></i> Continuar comprando</button>
</div>
</form>
<script>
document.getElementById("btnCheckout").addEventListener("click", function (e) {
e.preventDefault();
PWCheckout.Bind("tokenCreated", OnTokenReceived);
var amount = document.getElementById("amount").value;
var currency = document.getElementById("currency").value;
var uniqueid = document.getElementById("uniqueid").value;
var trxtoken = document.getElementById("PWToken").value;
var name = document.getElementById("name").value;
var email = document.getElementById("emailNameChecking").value;
PWCheckout.SetProperties({
"TrxToken":trxtoken,
"amount": amount,
"Tip":000,
"currency":"$",
"capture":true,
"lang": "ESP",
"form_id": "shoppingcart_form",
"name": name,
"email": email,
"image": "https://myurl.com/images/logo.png",
"button_label": "Pagar #monto#",
"checkout_card": "1",
"autoSubmit": "true",
"DataDo":{"Tax":000,"Invoice":'000001'}
});
function OnTokenReceived(token) {
//$("#PWTokenAux").val(token.TokenId);
$("#modalOtToken").text(token.TokenId);
$('#processingPurchase').modal('open');
setTimeout(function () {
$("#PWTokenAux").val($("#PWToken").val());
}, 2000);
}
});
PWCheckout.AddActionButton("btnCheckout");
</script>
The problem that I present with this code is the reload of the page, I know that it uses an autosubmit=true, but I need to prevent it from reloading the page, even so it does it, what could I be doing wrong
try this structure to make sure you remove the default behavior from the form.
or just in the html
<form onsubmit="event.preventDefault()">