[Nuvei] [Simply Connect] Payment

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 Payment page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.safecharge.com/safecharge_resources/v1/checkout/checkout.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="initCheckout()">Initialize Checkout</button>
          </div>
        </div>
        <div id="checkout"></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.2
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: "[email protected]",
      address: "22 Automation Str. Updated.",
    },
  })

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

const initCheckout = async () => {
  if (checkout && checkout.destroy) {
    checkout.destroy()
  }

  let sessionData = await getSectionToken()
  console.log("Session data: ", sessionData)

  const onResult = function (result) {
    console.log(result)
    console.log(
      "Final callback data received by caller",
      JSON.stringify(result),
    )
  }

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

  checkout({
    renderTo: "#checkout",
   ...