tonder-web-sdk 1.4.0

package/src/classes/3dsHandler.js

@@ -0,0 +1,203 @@
+export class ThreeDSHandler {
+  constructor({
+    payload = null,
+    apiKey,
+    baseUrl,
+    successUrl
+  }) {
+    this.baseUrl = baseUrl,
+    this.apiKey = apiKey,
+    this.payload = payload,
+    this.successUrl = successUrl
+  }
+
+  saveVerifyTransactionUrl() {
+    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
+    if (url) {
+      this.saveUrlWithExpiration(url)
+    } else {
+      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
+      if (url) {
+        this.saveUrlWithExpiration(url)
+      } else {
+        console.log('No verify_transaction_status_url found');
+      }
+    }
+  }
+
+  saveUrlWithExpiration(url) {
+    try {
+      const now = new Date()
+      const item = {
+        url: url,
+        // Expires after 20 minutes
+        expires: now.getTime() + 20 * 60 * 1000
+      }
+      localStorage.setItem('verify_transaction_status', JSON.stringify(item))
+    } catch (error) {
+     console.log('error: ', error)
+    }
+  }
+
+  getUrlWithExpiration() {
+    const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
+    if (!item) return
+
+    const now = new Date()
+    if (now.getTime() > item.expires) {
+      this.removeVerifyTransactionUrl()
+      return null
+    } else {
+      return item.url
+    }
+  }
+
+  removeVerifyTransactionUrl() {
+    localStorage.removeItem("verify_transaction_status")
+  }
+
+  getVerifyTransactionUrl() {
+    return localStorage.getItem("verify_transaction_status") 
+  }
+
+  loadIframe() {
+    const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+    if (iframe) {
+      return new Promise((resolve, reject) => {
+        const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+        if (iframe) {
+          this.saveVerifyTransactionUrl()
+          const container = document.createElement('div')
+          container.innerHTML = iframe
+          document.body.appendChild(container)
+
+          // Create and append the script tag manually
+          const script = document.createElement('script')
+          script.textContent = 'document.getElementById("tdsMmethodForm").submit();'
+          container.appendChild(script)
+
+          // Resolve the promise when the iframe is loaded
+          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
+          iframeElement.onload = () => resolve(true)
+        } else {
+          console.log('No redirection found');
+          reject(false)
+        }
+      })
+    }
+  }
+
+  getRedirectUrl() {
+    return this.payload?.next_action?.redirect_to_url?.url
+  }
+
+  redirectToChallenge() {
+    const url = this.getRedirectUrl()
+    if (url) {
+      this.saveVerifyTransactionUrl()
+      window.location = url;
+    } else {
+      console.log('No redirection found');
+    }
+  }
+
+  // Returns an object
+  // https://example.com/?name=John&age=30&city=NewYork
+  // { name: "John", age: "30", city: "NewYork" }
+  getURLParameters() {
+    const parameters = {};
+    const urlParams = new URLSearchParams(window.location.search);
+
+    for (const [key, value] of urlParams) {
+      parameters[key] = value;
+    }
+
+    return parameters;
+  }
+
+  handleSuccessTransaction(response) {
+    this.removeVerifyTransactionUrl();
+    window.location = this.successUrl
+    console.log('Transacción autorizada exitosamente.');
+    return response;
+  }
+
+  handleDeclinedTransaction(response) {
+    this.removeVerifyTransactionUrl();
+    console.log('Transacción rechazada.');
+    throw new Error("Transacción rechazada.");
+  }
+
+  // TODO: the method below needs to be tested with a real 3DS challenge
+  // since we couldn't get a test card that works with this feature
+  async handle3dsChallenge(response_json) {
+    // Create the form element:
+    const form = document.createElement('form');
+    form.name = 'frm';
+    form.method = 'POST';
+    form.action = response_json.redirect_post_url;
+
+    // Add hidden fields:
+    const creqInput = document.createElement('input');
+    creqInput.type = 'hidden';
+    creqInput.name = response_json.creq;
+    creqInput.value = response_json.creq;
+    form.appendChild(creqInput);
+
+    const termUrlInput = document.createElement('input');
+    termUrlInput.type = 'hidden';
+    termUrlInput.name =  response_json.term_url;
+    termUrlInput.value = response_json.TermUrl;
+    form.appendChild(termUrlInput);
+
+    // Append the form to the body:
+    document.body.appendChild(form);
+    form.submit();
+
+    await this.verifyTransactionStatus();
+  }
+
+  async handleTransactionResponse(response) {
+    const response_json = await response.json();
+
+    if (response_json.status === "Pending") {
+      return await this.handle3dsChallenge(response_json);
+    } else if (["Success", "Authorized"].includes(response_json.status)) {
+      return this.handleSuccessTransaction(response);
+    } else {
+      return this.handleDeclinedTransaction(response);
+    }
+  }
+
+  async verifyTransactionStatus() {
+    const verifyUrl = this.getUrlWithExpiration();
+
+    if (verifyUrl) {
+      const url = `${this.baseUrl}${verifyUrl}`;
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Token ${this.apiKey}`,
+          },
+          // body: JSON.stringify(data),
+        });
+
+        if (response.status !== 200) {
+          console.error('La verificación de la transacción falló.');
+          return
+        }
+
+        return await this.handleTransactionResponse(response);
+      } catch (error) {
+        console.error('Error al verificar la transacción:', error);
+        return error;
+      }
+    } else {
+      console.log('No verify_transaction_status_url found');
+    }
+  }
+}

package/src/classes/checkout.js

@@ -0,0 +1,125 @@
+import { AES } from "crypto-js";
+
+export class Checkout {
+  constructor({
+    apiKey,
+    type = "payment",
+    backgroundColor="#141414",
+    color="#EBEBEB",
+    cb=()=>{},
+    url="http://checkout.tonder.io/#/"
+  }) {
+    this.url = url
+    this.apiKey = apiKey
+    this.type = type
+    this.backgroundColor = backgroundColor
+    this.color = color
+    this.params = ""
+    this.order = {}
+    this.buttonText = "Proceder al pago"
+    this.cb = cb
+
+    window.addEventListener("message", this.receiveMessage.bind(this), false);
+  }
+  generateButton = (buttonText) => {
+    this.buttonText = buttonText ? buttonText : this.buttonText
+    this.tonderButton = document.createElement('button');
+    this.tonderButton.innerHTML = this.buttonText;
+    this.stylishButton(this.tonderButton)
+    this.tonderButton.onclick = this.openCheckout
+  }
+  getButton = ({buttonText}) => {
+    this.generateButton(buttonText)
+    return this.tonderButton
+  }
+  mountButton = ({buttonText}) => {
+    this.generateButton(buttonText)
+    const entryPoint = document.getElementById("tonder-checkout")
+    try {
+      entryPoint.innerHTML = ""
+      entryPoint.append(this.tonderButton)
+    } catch(error) {
+      console.error(error)
+    }
+  }
+  stylishButton = (element) => {
+    element.style.backgroundColor = this.backgroundColor
+    element.style.color = this.color
+    element.style.display = 'flex'
+    element.style.justifyContent = 'center'
+    element.style.border = 'none'
+    element.style.padding = '1rem'
+    element.style.borderRadius = '10px'
+    element.style.fontSize = '1rem'
+    element.style.width = '100%'
+    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
+  }
+  setOrder = ({products, email, shippingCost }) => {
+    let _order = {}
+    if (products) _order.products = products 
+    if (email) _order.email = email 
+    if (shippingCost) _order.shippingCost = shippingCost
+    this.order = {...this.order, ..._order}
+    return this.order
+  }
+  openTabListener = (tab, button) => {
+    const tabInterval = setInterval(() => {
+      if (tab.closed) {
+        clearInterval(tabInterval);
+        button.disabled = false
+        button.innerHTML = this.buttonText
+      }
+    }, 500)
+  }
+  openCheckout = () => {
+    const queryString = this.getUrlParams()
+    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
+    const encodedURL = encodeURIComponent(encrypted);
+    this.params = "?" + encodedURL;
+    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
+    this.tonderButton.disabled = true
+    this.tonderButton.innerHTML = `
+      <div class="loader"></div>
+      <style>
+      .loader {
+        border: 4px solid ${this.color};
+        border-radius: 50%;
+        border-top: 4px solid ${this.backgroundColor};
+        width: 0.625rem;
+        height: 0.625rem;
+        -webkit-animation: spin 2s linear infinite; /* Safari */
+          animation: spin 2s linear infinite;
+      }
+
+    /* Safari */
+      @-webkit-keyframes spin {
+        0% { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); }
+      }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+      </style>
+      `
+    this.openTabListener(newWindow, this.tonderButton)
+  }
+  getUrlParams = () => {
+    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
+    if (params.products) {
+      params.products = JSON.stringify(params.products)
+    }
+    const queryString = new URLSearchParams(params).toString();
+    return queryString
+  }
+  receiveMessage(event) {
+    // Parse data if it is possible, in case of error it will return the raw data.
+    try {
+      const data = JSON.parse(event.data)
+      this.cb(data)
+    } catch(error) {
+      this.cb(event.data)
+    }
+  }
+}

package/src/classes/inlineCheckout.js

@@ -0,0 +1,349 @@
+import { cardTemplate } from '../helpers/template.js'
+import {
+  getBusiness,
+  customerRegister,
+  createOrder,
+  createPayment,
+  startCheckoutRouter,
+  getOpenpayDeviceSessionID
+} from '../data/api';
+import {
+  showError,
+  getBrowserInfo,
+} from '../helpers/utils';
+import { initSkyflow } from '../helpers/skyflow'
+import { ThreeDSHandler } from './3dsHandler.js';
+
+
+export class InlineCheckout {
+  static injected = false;
+  customer = {}
+  items = []
+  baseUrl = process.env.BASE_URL || "http://localhost:8000";
+  collectContainer = null
+  merchantData = {}
+  cartTotal = null
+  metadata = {}
+  card = {}
+
+  constructor({
+    apiKey,
+    returnUrl,
+    successUrl,
+    renderPaymentButton = false,
+    callBack = () => { },
+    styles,
+  }) {
+    this.apiKeyTonder = apiKey;
+    this.returnUrl = returnUrl;
+    this.successUrl = successUrl;
+    this.renderPaymentButton = renderPaymentButton;
+    this.callBack = callBack;
+    this.customStyles = styles
+
+    this.abortController = new AbortController()
+    this.process3ds = new ThreeDSHandler(
+      { apiKey: apiKey, baseUrl: this.baseUrl, successUrl: successUrl }
+    )
+  }
+
+  #mountPayButton() {
+    if (!this.renderPaymentButton) return;
+
+    const payButton = document.querySelector("#tonderPayButton");
+    if (!payButton) {
+      console.error("Pay button not found");
+      return;
+    }
+
+    payButton.style.display = "block";
+    payButton.textContent = `Pagar $${this.cartTotal}`;
+    payButton.onclick = async (event) => {
+      event.preventDefault();
+      await this.#handlePaymentClick(payButton);
+    };
+  }
+
+  async #handlePaymentClick(payButton) {
+    const prevButtonContent = payButton.innerHTML;
+    payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
+    try {
+      const response = await this.payment(this.customer);
+      this.callBack(response);
+    } catch (error) {
+      console.error("Payment error:", error);
+    } finally {
+      payButton.innerHTML = prevButtonContent;
+    }
+  }
+
+  payment(data) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        this.#handleCustomer(data.customer)
+        this.setCartTotal(data.cart?.total)
+        this.setCartItems(data.cart?.items)
+        this.#handleMetadata(data)
+        this.#handleCurrency(data)
+        this.#handleCard(data)
+        const response = await this.#checkout()
+        if (response) {
+          const process3ds = new ThreeDSHandler({
+            baseUrl: this.baseUrl,
+            apiKey: this.apiKeyTonder,
+            payload: response,
+          });
+          this.callBack(response);
+
+          const iframe = response?.next_action?.iframe_resources?.iframe
+
+          if (iframe) {
+            process3ds.loadIframe().then(() => {
+              //TODO: Check if this will be necessary on the frontend side
+              // after some the tests in production, since the 3DS process
+              // doesn't works properly on the sandbox environment
+              // setTimeout(() => {
+              //   process3ds.verifyTransactionStatus();
+              // }, 10000);
+              process3ds.verifyTransactionStatus();
+            }).catch((error) => {
+              console.log('Error loading iframe:', error)
+            })
+          } else {
+            const redirectUrl = process3ds.getRedirectUrl()
+            if (redirectUrl) {
+              process3ds.redirectToChallenge()
+            } else {
+              resolve(response);
+            }
+          }
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  #handleCustomer(customer) {
+    console.log('customer: ', customer)
+    if (!customer) return
+
+    this.firstName = customer?.firstName
+    this.lastName = customer?.lastName
+    this.country = customer?.country
+    this.address = customer?.street
+    this.city = customer?.city
+    this.state = customer?.state
+    this.postCode = customer?.postCode
+    this.email = customer?.email
+    this.phone = customer?.phone
+    this.customer = customer
+  }
+
+  #handleMetadata(data) {
+    this.metadata = data?.metadata
+  }
+
+  #handleCurrency(data) {
+    this.currency = data?.currency
+  }
+
+  #handleCard(data) {
+    this.card = data?.card
+  }
+
+  setCartItems(items) {
+    console.log('items: ', items)
+    this.cartItems = items
+  }
+
+  setCartTotal(total) {
+    console.log('total: ', total)
+    this.cartTotal = total
+    this.#updatePayButton()
+  }
+
+  #updatePayButton() {
+    const payButton = document.querySelector("#tonderPayButton");
+    if (!payButton) return
+    payButton.textContent = `Pagar $${this.cartTotal}`;
+  }
+
+  setCallback(cb) {
+    this.cb = cb
+  }
+
+  injectCheckout() {
+    if (InlineCheckout.injected) return
+    this.process3ds.verifyTransactionStatus()
+    const injectInterval = setInterval(() => {
+      if (document.querySelector("#tonder-checkout")) {
+        document.querySelector("#tonder-checkout").innerHTML = cardTemplate;
+        this.#mountTonder();
+        clearInterval(injectInterval);
+        InlineCheckout.injected = true
+      }
+    }, 500);
+  }
+
+  async #fetchMerchantData() {
+    this.merchantData = await getBusiness(
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.abortController.signal
+    );
+    return this.merchantData
+  }
+
+  async getCustomer(customer, signal) {
+    return await customerRegister(this.baseUrl, this.apiKeyTonder, customer, signal);
+  }
+
+  async #mountTonder() {
+    this.#mountPayButton()
+
+    const {
+      vault_id,
+      vault_url,
+    } = await this.#fetchMerchantData();
+
+    this.collectContainer = await initSkyflow(
+      vault_id,
+      vault_url,
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.abortController.signal,
+      this.customStyles,
+    );
+  }
+
+  removeCheckout() {
+    InlineCheckout.injected = false
+    // Cancel all requests
+    this.abortController.abort();
+    this.abortController = new AbortController();
+
+    clearInterval(this.injectInterval);
+    console.log("InlineCheckout removed from DOM and cleaned up.");
+  }
+
+  async #getCardTokens() {
+    if (this.card?.skyflow_id) return this.card
+    try {
+      const collectResponse = await this.collectContainer.collect();
+      const cardTokens = await collectResponse["records"][0]["fields"];
+      return cardTokens;
+    } catch (error) {
+      showError("Por favor, verifica todos los campos de tu tarjeta")
+      throw error;
+    }
+  }
+
+  async #checkout() {
+    try {
+      document.querySelector("#tonderPayButton").disabled = true;
+    } catch (error) {
+    }
+
+    const { openpay_keys, reference, business } = this.merchantData
+    const total = Number(this.cartTotal)
+
+    const cardTokens = await this.#getCardTokens();
+
+    try {
+      let deviceSessionIdTonder;
+      if (openpay_keys.merchant_id && openpay_keys.public_key) {
+        deviceSessionIdTonder = await getOpenpayDeviceSessionID(
+          openpay_keys.merchant_id,
+          openpay_keys.public_key,
+          this.abortController.signal
+        );
+      }
+
+      const { id, auth_token } = await this.getCustomer(
+        this.customer, 
+        this.abortController.signal
+      )
+
+      var orderItems = {
+        business: this.apiKeyTonder,
+        client: auth_token,
+        billing_address_id: null,
+        shipping_address_id: null,
+        amount: total,
+        status: "A",
+        reference: reference,
+        is_oneclick: true,
+        items: this.cartItems,
+      };
+      console.log('orderItems: ', orderItems)
+      const jsonResponseOrder = await createOrder(
+        this.baseUrl,
+        this.apiKeyTonder,
+        orderItems
+      );
+
+      // Create payment
+      const now = new Date();
+      const dateString = now.toISOString();
+
+      var paymentItems = {
+        business_pk: business.pk,
+        client_id: id,
+        amount: total,
+        date: dateString,
+        order_id: jsonResponseOrder.id,
+      };
+      const jsonResponsePayment = await createPayment(
+        this.baseUrl,
+        this.apiKeyTonder,
+        paymentItems
+      );
+
+      // Checkout router
+      const routerItems = {
+        card: cardTokens,
+        name: this.firstName || "",
+        last_name: this.lastName || "",
+        email_client: this.email,
+        phone_number: this.phone,
+        return_url: this.returnUrl,
+        id_product: "no_id",
+        quantity_product: 1,
+        id_ship: "0",
+        instance_id_ship: "0",
+        amount: total,
+        title_ship: "shipping",
+        description: "transaction",
+        device_session_id: deviceSessionIdTonder ? deviceSessionIdTonder : null,
+        token_id: "",
+        order_id: jsonResponseOrder.id,
+        business_id: business.pk,
+        payment_id: jsonResponsePayment.pk,
+        source: 'sdk',
+        metadata: this.metadata,
+        browser_info: getBrowserInfo(),
+        currency: this.currency,
+      };
+      const jsonResponseRouter = await startCheckoutRouter(
+        this.baseUrl,
+        this.apiKeyTonder,
+        routerItems
+      );
+
+      if (jsonResponseRouter) {
+        try {
+          document.querySelector("#tonderPayButton").disabled = false;
+        } catch { }
+        return jsonResponseRouter;
+      } else {
+        showError("No se ha podido procesar el pago")
+        return false;
+      }
+    } catch (error) {
+      console.log(error);
+      showError("Ha ocurrido un error")
+      throw error;
+    }
+  };
+}