Authorize + Tokenize

Here is a method to authorize a new card and tokenize the card.
 <!doctype html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum
scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Iframe Demo</title>
 <link rel="stylesheet" type="text/css" 
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 
  <link rel="stylesheet" type="text/css" 
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
 
<body> 
<div id="containerIframe" class="d-flex justify-content-center align-items-center p-4"> 
  <!-- You can specify the width here --> 
  <div style="width: 468px;"> 
    <span>Payment Method - Auth</span> 
    <div class="card"> 
      <div class="accordion" id="accordionExample"> 
        <div class="card"> 
          <div class="card-header p-0"> 
            <h2 class="mb-0"> 
              <button style="width: 100%" class="btn btn-light btn-block text-left p-3 rounded-0" 
                      data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria
controls="collapseOne"> 
                <div class="d-flex align-items-center justify-content-between"> 
                  <span>Credit card</span> 
                </div> 
              </button> 
            </h2> 
          </div> 
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data
parent="#accordionExample"> 
            <form> 
              <div id="iframeContent"></div> 
              <div 
                      style="padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 
1rem !important;"> 
                <button type="submit" class="btn btn-block free-button" style="background-color: #dd051f; 
color: white"> 
                  Pay With Credit Card 
                </button> 
              </div> 
              <div> 
                <p style="text-align:center" id="response"></p> 
              </div> 
            </form> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>
</div> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto
js.min.js"></script> 
<script> 
 
  const locationId = __LOCATION_ID__; 
  let accessToken = ""; 
  let sessionID = '0db08136-feec-4d17-b54c-b38d6460b527'; 
 
  async function fetchAccessToken() { 
    const url = 'https://sandbox-api-gtw.softpoint.io/api/locations/' + locationId + '/access_token'; 
    const params = { 
      api_key: '__API_KEY__', 
      client: '__CLIENT__' 
    }; 
 
    const requestOptions = { 
      method: 'POST', 
      headers: { 
        'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify(params), 
    }; 
 
    const res = fetch(url, requestOptions) 
            .then(response => response.json()) 
            .then(data => { 
              const accessToken = data.accessToken; 
              return accessToken; 
            }) 
            .catch(error => console.error('Error:', error)); 
 
    return res; 
  } 
 
  async function loadAndProcessOrderWithAccessToken() { 
    accessToken = await fetchAccessToken(); 
 
    const scriptElement = document.createElement("script"); 
    scriptElement.src = `https://sandbox-iframe-gtw.softpoint.io/api/softpoint
pay?location_id=`+locationId+`&session_key=${accessToken}`; 
 
    document.head.appendChild(scriptElement); 
 
    scriptElement.onload = function () { 
 
      const conf = { 
        "location_id": locationId, 
        "access_token": accessToken, 
    "process_type": "authorize", 
        "include-cardholder": 1, 
        "user_id": '5000', 
        "country_iso": "US", 
      }; 
 
      initPaymentForm('iframeContent', conf); 
    }; 
  } 
 
  loadAndProcessOrderWithAccessToken(); 
 
  const form = document.querySelector('form'); 
  form.addEventListener('submit', (event) => { 
    event.preventDefault(); 
    //Prepare settings 
    let amount = 201.50; 
    const paymentDetails = { 
      "session_id": sessionID, 
      "location_id": locationId, 
      "access_token": accessToken, 
      "amount": amount, 
      "user_id": "5000", 
      "country_iso": "US", 
      "phone_number": "1869762446", 
      "msisdn": "18697624464", 
      "email": "[email protected]", 
      "storeCard": 1, 
      "order": { 
        "items": [ 
          { 
            "id": "1000", 
            "name": "ProductSKU", 
            "type": "MobileRecharge", 
            "productSKU": "productSKU", 
            "productProvider": "DC", 
            "quantity": 1, 
            "price": 200.50, 
            "tax_type": "Inclusive", 
            "tax": 1.00, 
            "phone_number": "1869762446", 
          } 
        ] 
      } 
    } 
    submitPayment(paymentDetails); 
  });
  function onApprovedCallback(e) { 
    console.log('onApprovedCallback called', e); 
    const response = document.querySelector('#response'); 
    response.innerHTML = JSON.stringify(e); 
    response.style.color = 'green'; 
    var btn = document.getElementById('btnSubmit'); 
    btn.disabled = false; 
    btn.innerText = 'Custom Submit'; 
  } 
 
  function onDeclinedCallback(e) { 
    console.log('onDeclinedCallback called', e); 
    if (e == 'input_error') { 
      var btn = document.getElementById('btnSubmit'); 
      btn.disabled = false; 
    } else { 
      const response = document.querySelector('#response'); 
      response.innerHTML = JSON.stringify(e); 
      var btn = document.getElementById('btnSubmit'); 
      response.style.color = 'red'; 
      btn.disabled = false; 
      btn.innerText = 'Custom Submit'; 
    } 
 
  } 
 
  function onErrorCallback(e) { 
    console.log('onErrorCallback called', e); 
  } 
 
 
  function onDecline(e) { 
    console.log('onSuccess called', e); 
  } 
 
</script> 
</body> 
 
</html>