[Nuvei] [Simply Connect] Withdrawal

by nuvei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!DOCTYPE html>
    <html>

      <head>
        <title>Nuvei Simply Connect Withdrawal page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.safecharge.com/safecharge_resources/v1/checkout/withdrawal.js"></script>

      </head>

      <body>

        <div class='container'>
          <!-- <div class="item">
            <label for="session">sessionToken</label>
            <input type="text" placeholder="sessionToken" id="session" name="session" />
          </div>
          <div class="item">
            <label for="metchantID">merchantId</label>
            <input value="" type="text" placeholder="merchantId" id="metchantID" />
          </div>
          <div class="item">
            <label for="metchantSiteID">merchantSiteId</label>
            <input value="" type="text" placeholder="merchantSiteId" id="metchantSiteID" />
          </div> -->
          <div class="item100">
            <button class='init-button' onclick="initWithdrawal()">Initialize Withdrawal</button>
          </div>
        </div>
        <div id="withdrawal"></div>
      </body>

    </html>

CSS

html {
  min-height: 1000px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  order: 2;
  justify-content: left;
}

.result-container {
  display: flex;
  flex-wrap: wrap;
  order: 2;
  justify-content: left;
	height: auto;
	margin-top: 200px;
}

#result {
	flex: 0 100%;
  margin-top: 1rem;
  background-color: #3a4453;
  color: #fff;
  font-size: 12px;
}

.inputFields {
  margin-left: 40px;
}
.item {
  /* flex: 0 48%; */
  margin-bottom: 2%; /* (100-32*3)/2 */
  padding-right: 15px;
}
.item100 {
	display: flex;
  flex: 0 100%;
  margin-top: 0%;
  margin-bottom: 2%; 
  justify-content: center;
	align-items: center;
}

 input {
	 background: #ffffff;
	 border-radius: 3px;
	 border: 1px solid #D3DCE6;
	 color: #4A5568;
	 display: block;
	 outline: none;
	 padding: 5px 12px;
	 width: 360px;
	 font-family: Nunito Sans, sans-serif;
   font-size: 14px;
}

 input:placeholder-shown {
	 border: 1px solid #D3DCE6;
}

 input:hover {
	 border: 1px solid #95AAC1;
}

 input:focus {
	 border: 1px solid #493DAA;
}

 .init-button {
	 background-color: #493DAA;
	 border-radius: 3px;
	 border: 1px solid #382F7E;
	 color: #fff;
	 font-size: 14px;
	 font-weight: 400;
	 height: 36px;
	 line-height: 20px;
	 margin: 16px auto 10px;
	 width: 200px;
}
.init-button:hover {
  color: #fff;
  background-color: #382F7E;
	border: 1px solid #493DAA;
	cursor: pointer;
}

 label {
	 color: #4a5568;
	 font-size: 14px;
	 font-weight: 600;
}
 
button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

body {
  font-family: Nunito Sans, Roboto,sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4a5568;
  line-height: 1.8;
}

#apms label {
    display: flex;
    align-items: baseline;
    flex-direction: row;
}

#apms label input {
  width: 50px;
}
 .sfcModal-header {
	 height: 1.5rem;
}
 .sfcModal-dialog {
	 margin: 55px auto;
	 max-width: 492px;
	 position: relative;
	 width: auto;
}
 .sfcModal-content {
	...

JavaScript

var merchantId = '8536594779582844752'; //as assigned by Nuvei
var merchantSiteId = '231188'; //as assigned by Nuvei
var secrets = 'PGQD3OdgG0eal4TsKpfECyfyXlCzj2lwvsQYkgUzEFLG3OeuegXzLcRO4H9Z4CcO'; //as assigned by Nuvei
var url = 'https://proxy-websdk.fly.dev/https://ppp-test.safecharge.com/ppp/api/v1/openOrder.do';
var env = 'int';
var userTokenId = 'WithdrawalTestUser';
var country = 'US';
var currency = 'USD';
var amount = 115.20;
var minAmount = 1;
var maxAmount = 500;

// This is for demonstration purpose. openOrder always must be called from backend server
window.getSectionToken = async () => {
  var timestamp = moment().format("YYYYMMDDHHmmss");
  var stringForChecksum = merchantId + merchantSiteId + amount + currency + timestamp + secrets;
  var checksum = CryptoJS.SHA256(stringForChecksum).toString(CryptoJS.enc.Hex);
  /* var checksum = CryptoJS.MD5(stringForChecksum).toString(CryptoJS.enc.Hex) */
  console.log(checksum);

  const resp = await axios.post(url, {
    merchantId: merchantId,
    merchantSiteId: merchantSiteId,
    userTokenId: userTokenId,
    currency: currency,
    amount: amount,
    openAmount: {
      min: minAmount,
      max: maxAmount
    },
    deviceDetails: {
      ipAddress: "10.12.13.14"
    },
    timeStamp: timestamp,
    checksum: checksum,
    billingAddress: {
      "country": country,
      "email": "mhsbg.xxnbx@udapl.rg",
      "address": "22 Automation Str. Updated.",
    },
  });


  const {
    data: {
      sessionToken
    }
  } = resp;
  return resp.data;
};

const initWithdrawal = async () => {

	if (document.getElementById('withdrawal')) {
		document.getElementById('withdrawal').innerHtml = '';
	}

	let sessionData = await getSectionToken();
	console.log('Session data: ', sessionData);
	
  const onResult = function(result) {
    console.log(result);
  }

  const onReady = function(result) {
    console.log('loaded =>', result);
  }

	withdrawal({
		renderTo: '#withdrawal',
		sessionToken:...