Simply Connect 2.0

by nuvei

HTML

<script src="https://cdn.safecharge.com/safecharge_resources/v1/websdk//simplyConnect_v2.js"></script>

<section class="container">
  <div class="item">
    <label for="x-api-key"> X-API-KEY </label>
    <input
      type="text"
      placeholder="x-api-key"
      id="x-api-key"
      name="x-api-key"
    />
  </div>
  <div class="item">
    <label for="processingEntityId"> processingEntityId </label>
    <input
      type="text"
      placeholder="processingEntityId"
      id="processingEntityId"
      name="processingEntityId"
    />
  </div>
  <div class="item">
    <label for="env"> ENV </label>
    <select id="env">
      <option value="int" selected>int</option>
      <option value="qa">qa</option>
      <option value="qa1">qa1</option>
      <option value="prod">prod</option>
    </select>
  </div>
  <div class="item">
    <button onclick="initSimplyConnect()">Init Simply Connect 2.0</button>
    <button onclick="createPaymentToken()">Create Payment Token</button>
  </div>
  <div id="root"></div>
</section>

CSS

body {
  font-family:
    Nunito Sans,
    sans-serif;
}

.container {
  /* display: flex; */
  flex-wrap: wrap;
  order: 2;
  justify-content: left;
}

.item {
  height: 100%;
  margin-bottom: 2%;
  padding-right: 15px;
}

.item label {
  color: #4a5568;
  font-size: 14px;
  font-weight: 600;
}

.item button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fafbfc;
  background-color: #e40046;
  border: 1px solid #e40046;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  line-height: 20px;
  margin: 10px 0;
  padding: 0 15px;
  cursor: pointer;
}

.item button:hover {
  background-color: #ca013f;
  border: 1px solid #ca013f;
}

.item input,
.item select {
  display: block;
  width: 360px;
  height: 34px;
  color: #4a5568;
  background: #ffffff;
  border: 1px solid #d3dce6;
  border-radius: 8px;
  outline: none;
  margin-top: 5px;
  padding: 0 12px;
  font-family:
    Nunito Sans,
    sans-serif;
  box-sizing: border-box;
}

.item input:placeholder-shown {
  border: 1px solid #d3dce6;
}

.item input:hover {
  border: 1px solid #95aac1;
}

.item input:focus {
  border: 1px solid #00becf;
}

.item select {
  width: 120px;
  height: 36px;
  padding: 0 12px;
}

JavaScript

var endpoints = {
  int: "https://api-sandbox.nuvei.com/sdk-api/orders",
  qa: "https://api-qa.nuvei.com/sdk-api/orders",
  qa1: "https://k8s-tlv-cl0-qa1.gw-4u.com/rest-sdkadapter/orders",
  prod: "https://api.nuvei.com/sdk-api/orders/",
}

window.postOrder = async () => {
  const body = {
    logLevel: 6,
    processingEntityId: document.getElementById("processingEntityId").value,
    // sourceApplication: "VT",
    amount: 10,
    currency: "USD",
    // storePaymentOption: "buyerToken",
    // merchantTransactionId: "1234523",
    buyerDetails: {
      buyerId: "123456799119",
      billingAddress: {
        countryCode: "US",
      },
    },
    permittedOperations: ["operations"],
    openAmount: {
      min: 0.1,
      max: 500,
    },
    custom: {
      key1: "value1",
      key2: "value2",
    },
    uiConfig: {
      theme: "accordion",
      // paymentTiles: "showMore",
      // focusOnCheckout: "true",
      // support19Digits: "true",
      // maskCvv: "true",
      // collectCVV: "false", // or never, optional, upoOptional
      savePM: "true", // or always
      // savePmUrl: "https://google.com",
      promoCode: "true",
      // payButton: "noButton", or // amountButton
      // pmWhitelist: 'ACH, apmgw_expresscheckout',
      // pmBlacklist: 'ACH, apmgw_expresscheckout',
      // apmWindowType: "newTab", // or redirect
      amountSuggestions: JSON.stringify([10, 20, 50]),
      blockCards: JSON.stringify(["visa"]),
      // cardWhiteList: JSON.stringify(['visa']),
      apmConfig: JSON.stringify({
        googlePay: {
          "3Dflow": "enable",
          allowCreditCards: true,
          buttonLocation: "onTop",
          allowPrepaidCards: false,
          allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
          allowedCardNetworks: [
            "AMEX",
            "DISCOVER",
            "INTERAC",
            "JCB",
            "MASTERCARD",
            "VISA",
      ...