javascriptphppayment-processingelectronic-signature

adding javascript signature pad in .php file

I have a .php file that once a transaction is approved, I want it to show the signature pad but how will I implement it into my php code. The code below is a part of the .php file and I need to get https://github.com/szimek/signature_pad this signature pad to show but it is in JavaScript. 

 if($tran->result == "Approved"){

}

d

if($tran->result == "Approved"){
?>



<?
echo '<canvas id="signature-pad" class="signature-pad" width=400 
height=200></canvas>
    <div>
<button id="save">Save</button>

<button id="clear">Clear</button>
</div>'

?>
 <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> <script> var signaturePad = new 
 SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});    </script> </script><script src="touchpadjs.js"></script>

Solution

  • Found out what was wrong, the js file was not being accessed by the html and css code so i just added all the code into the php function as with for javascript and for css and it all started working.