HTML : changing a value inside a DIV element on a WIX embed html

Ask the community
,
1

Hi everyone !

I am trying to set up a third party payment gateway on a website. I am using an HTML embed element, and I wrote the following code in order to pass the formToken ( that I sucessfully retrieved previously) into the DIV element with the id " formulaire ".

I tried this method, however it’s not working since I get the message “No formToken”. I know that the value is passed correctly to the HTML element, and I know that it’s a string already, so it seems that the problem comes from the part with the red arrow :

<html>
 <head>
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

  <script 
  src="https://static.osb.pf/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
  kr-public-key="58739933:testpublickey_NUFA6m8QLqEaHktbQ1TkA7Z596H8KEFCiKOaO4871cZCH" 
  kr-post-url-success="paid.html">
  </script>

  <link rel="stylesheet" 
  href="https://static.osb.pf/static/js/krypton-client/V4.0/ext/classic-reset.css">
  <script 
  src="https://static.osb.pf/static/js/krypton-client/V4.0/ext/classic.js">
  </script> 

  <script type="text/javascript">
         window.onmessage = (event) => {
              if (event.data) {
                  var form = document.getElementById("formulaire");
//problem ----->  form.setAttribute("kr-form-token", event.data);
                 }  
             };
 </script> 

</head>

<body>
  <!-- payment form -->
 <div class="kr-embedded" id="formulaire"
 kr-form-token = "TOKEN-TO-BE-REPLACED">

 <div class="kr-pan"></div>
 <div class="kr-expiry"></div>
 <div class="kr-security-code"></div>

 <button class="kr-payment-button"></button>

 <div class="kr-form-error"></div>
 </div>
</body>
</html>

If anyone would have the correct way to do it, I would really really be grateful !

2

Look at the browser console and see if t logs any error.

3

Checking it. Back to you in 1 min

4

Nope, no error. I get my token in the console as requested on client-side and that’s it…

5

By using form.setAttribute( “kr-form-token” , event.data);, I think that I actually only update the var form and not the div element. Maybe there is something more that I need to do ?

6

@valentinloppe it’s hard to say and actually is not in the scope of this forum. But try to inspect the elements, see if an div with id “formulaire” is there and what the attribute value is. If everything is there you’ll have to go back to the 3rd party documentation (unless there’s anyone who used it and can answer),

7

@jonatandor35 ok then, thank you for your answer :slight_smile: I learnt javascript by myself without any knowledge of HTML so I am a bit lost now when it comes to mix them up…

By using form.setAttribute( “kr-form-token” , event.data);, I think that I actually only update the var form and not the div element. Maybe there is something more that I need to do ?

Thank you for your help !

8

@valentinloppe by this line you are supposed to update the attribute of the html div element.
Maybe you need to do other things as well. You should read their docs.

9

and try to move this part to the end of the body:

<script type="text/javascript">
         window.onmessage = (event) => {
              if (event.data) {
                  var form = document.getElementById("formulaire");
                      form.setAttribute("kr-form-token", event.data);
                 }  
             };
 </script>