Tokenize Card

Here is an example on how to tokenize a card, this will not charge an amount to the user.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Iframe Demo</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
  <div id="containerIframe" class="d-flex justify-content-center align-items-center p-4">
    <div style="width: 468px;">
      <span>Tokenize - Example</span>
      <div class="card">
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne"
              >
                Credit Card
              </button>
            </h2>
            <div
              id="collapseOne"
              class="accordion-collapse collapse show"
              aria-labelledby="headingOne"
              data-bs-parent="#accordionExample"
            >
              <div class="accordion-body">
                <form>
                  <div id="iframeContent"></div>
                  <div class="pt-3">
                    <button
                      id="btnSubmit"
                      type="submit"
                      class="btn btn-block w-100"
                      style="background-color: #dd051f; color: white;"
                    >
                      Pay With Credit Card
                    </button>
                  </div>
                  <p class="text-center mt-2" id="response"></p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    const locationId = '__LOCATION_ID__';
    let accessToken = '';
    const 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__KEY__'
      };

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(params)
        });

        const data = await response.json();
        return data.accessToken;
      } catch (error) {
        console.error('Error fetching access token:', error);
      }
    }

    async function loadAndProcessOrderWithAccessToken() {
      accessToken = await fetchAccessToken();

      const script = document.createElement('script');
      script.src = `https://sandbox-iframe-gtw.softpoint.io/api/softpoint-pay?location_id=${locationId}&session_key=${accessToken}`;
      document.head.appendChild(script);

      script.onload = () => {
        const conf = {
          location_id: locationId,
          access_token: accessToken,
          process_type: 'tokenize',
          'include-cardholder': 1,
          user_id: '5000',
          country_iso: 'US'
        };
        initPaymentForm('iframeContent', conf);
      };
    }

    loadAndProcessOrderWithAccessToken();

    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();

      const paymentDetails = {
        session_id: sessionID,
        location_id: locationId,
        access_token: accessToken,
        amount: 0,
        user_id: '5000',
        country_iso: 'US',
        phone_number: '1869762446',
        msisdn: '18697624464',
        email: '[email protected]',
        storeCard: 1
      };

      submitPayment(paymentDetails);
    });

    function onApprovedCallback(e) {
      const response = document.querySelector('#response');
      response.innerHTML = JSON.stringify(e);
      response.style.color = 'green';
      const btn = document.getElementById('btnSubmit');
      btn.disabled = false;
      btn.innerText = 'Custom Submit';
    }

    function onDeclinedCallback(e) {
      const response = document.querySelector('#response');
      const btn = document.getElementById('btnSubmit');

      if (e === 'input_error') {
        btn.disabled = false;
      } else {
        response.innerHTML = JSON.stringify(e);
        response.style.color = 'red';
        btn.disabled = false;
        btn.innerText = 'Custom Submit';
      }
    }

    function onErrorCallback(e) {
      console.error(e);
    }

    function onDecline(e) {
      console.log(e);
    }
  </script>
</body>
</html>

Response Fields

Field	Type	Description
`transaction_id`	String	Unique identifier for the tokenization transaction
`card_data.token`	String	The generated token that represents the card for future transactions
`card_data.cardfullname`	String	The cardholder's name as provided during tokenization
`card_data.expiry_information`	String	Card expiration date in MM/YY format
`card_data.last4`	String	Last 4 digits of the card number
`card_data.card_brand`	String	The card brand (Visa, MasterCard, American Express, etc.)

Response Example

{
  "transaction_id": "--REDACTED",
  "card_data": {
    "token": "--REDACTED",
    "cardfullname": "john doe",
    "expiry_information": "12/26",
    "last4": "5454",
    "card_brand": "MasterCard"
  }
}