tonder-web-sdk 1.4.0

package/src/data/api.js

@@ -0,0 +1,109 @@
+export async function getOpenpayDeviceSessionID(merchant_id, public_key, signal) {
+  let openpay = await window.OpenPay;
+  openpay.setId(merchant_id);
+  openpay.setApiKey(public_key);
+  openpay.setSandboxMode(true);
+  var response = await openpay.deviceData.setup({signal});
+  return response;
+}
+
+export async function getBusiness(baseUrlTonder, apiKeyTonder, signal) {
+  const getBusiness = await fetch(
+    `${baseUrlTonder}/api/v1/payments/business/${apiKeyTonder}`,
+    {
+      headers: {
+        Authorization: `Token ${apiKeyTonder}`,
+      },
+      signal: signal,
+    }
+  );
+  const response = await getBusiness.json();
+  return response
+}
+
+export async function customerRegister(baseUrlTonder, apiKeyTonder, customer, signal) {
+  const url = `${baseUrlTonder}/api/v1/customer/`;
+  const data = { 
+    email: customer.email,
+    first_name: customer?.firstName,
+    last_name: customer?.lastName,
+    phone: customer?.phone,
+  }
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Token ${apiKeyTonder}`,
+    },
+    signal: signal,
+    body: JSON.stringify(data),
+  });
+
+  if (response.status === 201) {
+    const jsonResponse = await response.json();
+    return jsonResponse;
+  } else {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+}
+
+export async function createOrder(baseUrlTonder, apiKeyTonder, orderItems) {
+  const url = `${baseUrlTonder}/api/v1/orders/`;
+  const data = orderItems;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Token ${apiKeyTonder}`,
+    },
+    body: JSON.stringify(data),
+  });
+  if (response.status === 201) {
+    const jsonResponse = await response.json();
+    return jsonResponse;
+  } else {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+}
+
+export async function createPayment(baseUrlTonder, apiKeyTonder, paymentItems) {
+  const url = `${baseUrlTonder}/api/v1/business/${paymentItems.business_pk}/payments/`;
+  const data = paymentItems;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Token ${apiKeyTonder}`,
+    },
+    body: JSON.stringify(data),
+  });
+  if (response.status >= 200 && response.status <=299) {
+    const jsonResponse = await response.json();
+    return jsonResponse;
+  } else {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+}
+
+export async function startCheckoutRouter(baseUrlTonder, apiKeyTonder, routerItems) {
+  try {
+    const url = `${baseUrlTonder}/api/v1/checkout-router/`;
+    const data = routerItems;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Token ${apiKeyTonder}`,
+      },
+      body: JSON.stringify(data),
+    });
+    if (response.status >= 200 && response.status <= 299) {
+      const jsonResponse = await response.json();
+      return jsonResponse;
+    } else {
+      throw new Error("Failed to start checkout router")
+    }
+  } catch (error) {
+    throw error
+  }
+}

package/src/helpers/skyflow.js

@@ -0,0 +1,139 @@
+import { defaultStyles } from "./styles";
+
+export async function initSkyflow(
+  vaultId,
+  vaultUrl,
+  baseUrl,
+  apiKey,
+  signal,
+  customStyles = {}
+) {
+  const skyflow = await Skyflow.init({
+    vaultID: vaultId,
+    vaultURL: vaultUrl,
+    getBearerToken: async () => {
+      // Pass the signal to the fetch call
+      const response = await fetch(`${baseUrl}/api/v1/vault-token/`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Token ${apiKey}`,
+        },
+        signal: signal,
+      });
+
+      if (response.ok) {
+        const responseBody = await response.json();
+        return responseBody.token;
+      } else {
+        throw new Error('Failed to retrieve bearer token');
+      }
+    },
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+
+  // Create collect Container.
+  const collectContainer = await skyflow.container(
+    Skyflow.ContainerType.COLLECT
+  );
+
+  // Custom styles for collect elements.
+  var collectStylesOptions = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
+
+  const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
+  stylesForCardNumber.textIndent = '44px';
+
+  const lengthMatchRule = {
+    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+    params: {
+      max: 70,
+    },
+  };
+
+  const cardHolderNameElement = await collectContainer.create({
+    table: "cards",
+    column: "cardholder_name",
+    ...collectStylesOptions,
+    label: collectStylesOptions.labels?.nameLabel,
+    placeholder: collectStylesOptions.placeholders?.namePlaceholder,
+    type: Skyflow.ElementType.CARDHOLDER_NAME,
+    validations: [lengthMatchRule],
+  });
+
+  cardHolderNameElement.setError('Inválido')
+
+  // Create collect elements.
+  const cardNumberElement = await collectContainer.create({
+    table: "cards",
+    column: "card_number",
+    ...collectStylesOptions,
+    inputStyles: {
+      ...collectStylesOptions.inputStyles,
+      base: stylesForCardNumber
+    },
+    label: collectStylesOptions.labels?.cardLabel,
+    placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
+    type: Skyflow.ElementType.CARD_NUMBER,
+  });
+
+  cardNumberElement.setError('Inválido')
+
+  const cvvElement = await collectContainer.create({
+    table: "cards",
+    column: "cvv",
+    ...collectStylesOptions,
+    label: collectStylesOptions.labels?.cvvLabel,
+    placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+    type: Skyflow.ElementType.CVV,
+  });
+
+  cvvElement.setError('Inválido')
+
+  const expiryMonthElement = await collectContainer.create({
+    table: "cards",
+    column: "expiration_month",
+    ...collectStylesOptions,
+    label: collectStylesOptions.labels?.expiryDateLabel,
+    placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
+    type: Skyflow.ElementType.EXPIRATION_MONTH,
+  });
+
+  expiryMonthElement.setError('Inválido')
+
+  const expiryYearElement = await collectContainer.create({
+    table: "cards",
+    column: "expiration_year",
+    ...collectStylesOptions,
+    label: "",
+    placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
+    type: Skyflow.ElementType.EXPIRATION_YEAR,
+  });
+
+  expiryYearElement.setError('Inválido')
+
+  await mountElements(
+    cardNumberElement,
+    cvvElement,
+    expiryMonthElement,
+    expiryYearElement,
+    cardHolderNameElement,
+  )
+
+  return collectContainer
+}
+
+async function mountElements(
+  cardNumberElement,
+  cvvElement,
+  expiryMonthElement,
+  expiryYearElement,
+  cardHolderNameElement,
+) {
+  cardNumberElement.mount("#collectCardNumber");
+  cvvElement.mount("#collectCvv");
+  expiryMonthElement.mount("#collectExpirationMonth");
+  expiryYearElement.mount("#collectExpirationYear");
+  cardHolderNameElement.mount("#collectCardholderName");
+}

package/src/helpers/styles.js

@@ -0,0 +1,61 @@
+export const defaultStyles = {
+  inputStyles: {
+    base: {
+      border: "1px solid #e0e0e0",
+      padding: "10px 7px",
+      borderRadius: "5px",
+      color: "#1d1d1d",
+      marginTop: "2px",
+      backgroundColor: "white",
+      fontFamily: '"Inter", sans-serif',
+      fontSize: '16px',
+      '&::placeholder': {
+        color: "#ccc",
+      },
+    },
+    cardIcon: {
+      position: 'absolute',
+      left: '6px',
+      bottom: 'calc(50% - 12px)',
+    },
+    complete: {
+      color: "#4caf50",
+    },
+    empty: {},
+    focus: {},
+    invalid: {
+      border: "1px solid #f44336",
+    },
+    global: {
+      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    }
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  errorTextStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  labels: {
+    nameLabel: 'Titular de la tarjeta',
+    cardLabel: 'Número de tarjeta',
+    cvvLabel: 'CVC/CVV',
+    expiryDateLabel: 'Fecha de expiración',
+  },
+  placeholders: {
+    namePlaceholder: 'Nombre como aparece en la tarjeta',
+    cardPlaceholder: '1234 1234 1234 1234',
+    cvvPlaceholder: '3-4 dígitos',
+    expiryMonthPlaceholder: 'MM',
+    expiryYearPlaceholder: 'AA'
+  }
+}

package/src/helpers/template.js

@@ -0,0 +1,112 @@
+export const cardTemplate = `
+<div class="container-tonder">
+  <div id="collectCardholderName" class="empty-div"></div>
+  <div id="collectCardNumber" class="empty-div"></div>
+  <div class="collect-row">
+    <div id="collectExpirationMonth" class="empty-div"></div>
+    <div id="collectExpirationYear" class="expiration-year"></div>
+    <div id="collectCvv" class="empty-div"></div>
+  </div>
+  <div id="msgError"></div>
+  <button id="tonderPayButton" class="pay-button">Pagar</button>
+</div>
+
+<style>
+.container-tonder {
+  background-color: #F9F9F9;
+  margin: 0 auto !important;
+  padding: 30px 10px 30px 10px;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  max-width: 600px;
+  border: solid 1px #e3e3e3;
+  max-height: 100vh;
+}
+
+.collect-row {
+  display: flex !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+}
+
+.collect-row > :first-child {
+  min-width: 120px; !important
+}
+
+.expiration-year {
+  padding-top: 25px !important;
+}
+
+.empty-div {
+  height: 80px !important;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+
+.error-container{
+  color: red !important;
+  background-color: #FFDBDB !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
+.pay-button {
+  font-size: 16px;
+  font-weight: bold;
+  min-height: 2.3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  border: none;
+  background-color: #000;
+  color: #fff;
+  margin-bottom: 10px;
+  display: none;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+@media screen and (max-width: 600px) {
+  .payment_method_zplit {
+    font-size: 16px !important;
+    width: 100% !important;
+  }
+
+  .payment_method_zplit  label img {
+    display: none !important;
+  }
+}
+
+</style>
+`

package/src/helpers/utils.js

@@ -0,0 +1,68 @@
+export async function addScripts() {
+  try {
+    const skyflowScript = document.createElement("script");
+    skyflowScript.src = "https://js.skyflow.com/v1/index.js";
+    await new Promise((resolve, reject) => {
+      skyflowScript.onload = resolve;
+      skyflowScript.onerror = reject;
+      document.head.appendChild(skyflowScript);
+    });
+
+    const openPay1Script = document.createElement("script");
+    openPay1Script.src = "https://openpay.s3.amazonaws.com/openpay.v1.min.js";
+    await new Promise((resolve, reject) => {
+      openPay1Script.onload = resolve;
+      openPay1Script.onerror = reject;
+      document.head.appendChild(openPay1Script);
+    });
+
+    const openPay2Script = document.createElement("script");
+    openPay2Script.src = "https://openpay.s3.amazonaws.com/openpay-data.v1.min.js";
+    await new Promise((resolve, reject) => {
+      openPay2Script.onload = resolve;
+      openPay2Script.onerror = reject;
+      document.head.appendChild(openPay2Script);
+    });
+
+  } catch (error) {
+    console.error("Error loading scripts", error);
+  }
+}
+
+export function toCurrency(value) {
+  if (isNaN(parseFloat(value))) {
+    return value;
+  }
+  var formatter = new Intl.NumberFormat("es-MX", {
+    style: "currency",
+    currency: "MXN",
+    minimumFractionDigits: 2
+  });
+  return formatter.format(value);
+}
+
+export function showError(message) {
+  var msgErrorDiv = document.getElementById("msgError");
+  msgErrorDiv.classList.add("error-container");
+  msgErrorDiv.innerHTML = message;
+  setTimeout(function () {
+    try {
+      document.querySelector("#tonderPayButton").disabled = false;
+    } catch (error) {}
+    msgErrorDiv.classList.remove("error-container");
+    msgErrorDiv.innerHTML = "";
+  }, 3000);
+}
+
+export function getBrowserInfo() {
+  const browserInfo = {
+    javascript_enabled: true,  // Assumed since JavaScript is running
+    time_zone: new Date().getTimezoneOffset(),
+    language: navigator.language || 'en-US', // Fallback to 'en-US'
+    color_depth: window.screen ? window.screen.colorDepth : null,
+    screen_width: window.screen ? window.screen.width * window.devicePixelRatio || window.screen.width : null,
+    screen_height: window.screen ? window.screen.height * window.devicePixelRatio || window.screen.height : null,
+    user_agent: navigator.userAgent,
+  };
+  return browserInfo;
+}

package/src/index-dev.js

@@ -0,0 +1,129 @@
+import { InlineCheckout } from './classes/inlineCheckout'
+
+const customStyles = {
+  inputStyles: {
+    base: {
+      border: "2px dashed #4a90e2",
+      padding: "12px 8px",
+      borderRadius: "8px",
+      color: "#333333",
+      backgroundColor: "#f0f0f0",
+      fontFamily: '"Arial", sans-serif',
+      fontSize: '14px',
+      '&::placeholder': {
+        color: "#888888",
+      },
+    },
+    cardIcon: {
+      position: 'absolute',
+      left: '6px',
+      bottom: 'calc(50% - 12px)',
+    },
+    complete: {
+      color: "#4caf50",
+    },
+    empty: {},
+    focus: {},
+    invalid: {
+      border: "1px solid #f44336",
+    },
+    global: {
+      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    }
+  },
+  labelStyles: {
+    base: {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      fontFamily: '"Inter", sans-serif',
+      color: "#4a90e2",
+    },
+  },
+  errorTextStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#e74c3c",
+      fontFamily: '"Inter", sans-serif',
+    },
+  },
+  labels: {
+    nameLabel: 'Nombre de la de Tarjeta',
+    cardLabel: 'Número de Tarjeta',
+    cvvLabel: 'Código de Seguridad',
+    expiryDateLabel: 'Fecha de Expiración',
+  },
+  placeholders: {
+    namePlaceholder: 'Nombre como aparece en la tarjeta',
+    cardPlaceholder: '0000 0000 0000 0000',
+    cvvPlaceholder: '123',
+    expiryMonthPlaceholder: 'Mes',
+    expiryYearPlaceholder: 'Año'
+  }
+}
+
+const checkoutData = {
+  customer: {
+    firstName: "Adrian",
+    lastName: "Martinez",
+    country: "Mexico",
+    address: "Pinos 507, Col El Tecuan",
+    city: "Durango",
+    state: "Durango",
+    postCode: "34105",
+    email: "adrian@email.com",
+    phone: "8161234567",
+  },
+  currency: 'mxn',
+  cart: {
+    total: 399,
+    items: [
+      {
+        description: "Black T-Shirt",
+        quantity: 1,
+        price_unit: 1,
+        discount: 0,
+        taxes: 0,
+        product_reference: 1,
+        name: "T-Shirt",
+        amount_total: 399,
+      },
+    ]
+  },
+  card: { "skyflow_id": "53ca875c-16fd-4395-8ac9-c756613dbaf9" },
+  metadata: {
+    order_id: 123456
+  }
+};
+
+// localhost
+const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
+const returnUrl = "http://127.0.0.1:8080/"
+const successUrl = "http://127.0.0.1:8080/success"
+// stage
+// const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
+
+const inlineCheckout = new InlineCheckout({
+  apiKey,
+  returnUrl,
+  successUrl,
+  styles: customStyles
+});
+
+inlineCheckout.injectCheckout();
+
+document.addEventListener('DOMContentLoaded', function() {
+  const payButton = document.getElementById('pay-button');
+  payButton.addEventListener('click', async function() {
+    try {
+      payButton.textContent = 'Procesando...';
+      const response = await inlineCheckout.payment(checkoutData);
+      console.log(response)
+      alert('Pago realizado con éxito');
+    } catch (error) {
+      alert('Error al realizar el pago')
+    } finally {
+      payButton.textContent = 'Pagar';
+    }
+  });
+});

package/src/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      #checkout-container {
+        display: flex;
+        justify-content: center;
+      }
+      #pay-button {
+        padding: 10px 20px;
+        margin-top: 30px;
+        background-color: #4a90e2;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+      #payButton:hover {
+        background-color: #357abd;
+      }
+      .cart-details {
+        font-size: 3rem;
+        font-weight: bold;
+        padding: 2rem;
+        display: flex;
+        justify-content: center;
+      }
+      .button-container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="checkout-container">
+      <div class="cart-details">
+        <span>Total&nbsp</span>
+        <div id="cart-total">$399</div>
+      </div>
+      <form id="payment-form">
+        <div id="tonder-checkout"></div>
+      </form>
+      <div class="button-container">
+        <button id="pay-button">Pagar</button>
+      </div>
+    </div>
+  </body>
+  <script src="https://js.skyflow.com/v1/index.js"></script>
+  <script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
+  <script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
+</html>

package/src/index.js

@@ -0,0 +1,7 @@
+import { Checkout } from './classes/checkout'
+import { InlineCheckout } from './classes/inlineCheckout'
+
+export {
+    Checkout,
+    InlineCheckout,
+}

package/success.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pago Completado</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Pago completado con éxito</h1>
+</body>
+</html>