New Payment Integrate Method in CS-Cart - Webkul

In this blog, we will study how a developer can integrate a new Payment method in CS-Cart.

Before integrating a payment method, gather all the necessary information of the payment like the API documentation, API keys, and other credentials required to integrate that payment method.

First of all, you need to know how to create a New CS-Cart add-ons.

Include a function in your addon.xml file which is called in your func.php file like this –

stripe-payment-app-addons-stripe_refund-func-php-·-version-5-5-·-Cs-cart-Stripe-Payment-Gateway-·-GitLab

A processor is included which is selected on the payments page. If you want to use the credit card fields on the checkout page, use “cc.tpl” in place of “cc_stripe.tpl”. Click on Install on the add-ons page to install your add-on.

Add-ons-Manage-add-ons-Administration-panel

After your basic add-on is installed, let’s proceed further in integrating the payment functionality into the add-on.

Create a folder “payments” inside your addons directory like “app/addons/stripe_refund/payments” and then create a new file under the name you have set under processor_script while calling the function in func.php.

This file will be used in integrating your payment method.

Now create a new file in “design/backend/templates/addons/{your_addon_name}/views/payments/components/cc_processors/{admin_template_name}” and insert the html you want to display on Configure tab when selecting a payment processor while creating a new payment method like API keys, token, payment mode, order status after payment, etc.

admin_template

Now you are all set to create a new payment method, select the processor, and fill up all the required details under configure tab.

The main part left is to configure the payment file which we have created under the “payments” folder. That file will be called when a customer clicks on “Place Order”.

Use the required code that will be needed in that payment file.

Some of the variables that will be required in that payment file are:-

$processor_data['processor_params'] -> This array stores all the fields which are saved in your admin template file.
$_REQUEST['payment_info'] -> This array stores the card information which was filled before placing an order.
$order_info -> This array stores the order information.

If your API includes a return URL, it should be of the format like this – fn_url("payment_notification.return?payment={payment_file_name}&order_id=$order_id", AREA, 'current');

Now your payment method is integrated and is ready to be used by the customers.

Support

So, that was much about the integration process of payment method in CS-Cart. For any queries or doubts reach out to us at support@webkul.com to hire CS-Cart developers. You can also raise a ticket at our HelpDesk system webkul.uvdesk.com.

Originally published on https://webkul.com/blog/integrate-a-new-payment-method-in-cs-cart/

What is GEEK

Buddha Community

New Payment Integrate Method in CS-Cart - Webkul

websolution stuff

1626673140

Stripe Payment Gateway Integration Example In Laravel 8

In this post i will share you stripe payment gateway integration example in laravel 8, stripe payment gateway is integrated in many website for payment collection from client, In this time many e-commerce website and other shopping websites are use stripe payment gateway.

So, here we will learn stripe payment gateway integration in laravel 8.

https://websolutionstuff.com/post/stripe-payment-gateway-integration-example-in-laravel-8

Read Also : How To Integrate Paypal Payment Gateway In Laravel

https://websolutionstuff.com/post/how-to-integrate-paypal-payment-gateway-in-laravel

#stripe payment gateway integration example in laravel 8 #laravel 8 stripe payment gateway integration example #stripe payment gateway integration in laravel 8 #stripe payment gateway #laravel8 #payment gateway

Einar Hintz

1602564925

Razorpay Payment Gateway Integration in ASP.NET MVC

In this article, you will learn Razorpay Payment Gateway Integration in ASP.NET MVC web application or an eCommerce website using C#. With Razorpay, you have access to all payment modes, including credit and debit cards, UPI, and popular mobile wallets.

You may be interested in Paypal Payment Gateway Integration in ASP.NET Core

To check the Razorpay Payment Gateway demo, please click here:

How to integrate Razorpay Payment Gateway in ASP.NET

The Razorpay Payment Gateway enables you to accept payments via debit card, credit card, net banking (supports 3D Secure), UPI, or through any of our supported wallets. Refer to the Payment Methods section for a list of payment methods we support.

Find the below steps to integrate Razorpay in your website:-

#asp.net #how to #mvc #razorpay payment gateway #razorpay payment gateway demo #razorpay payment gateway documentation #razorpay payment gateway integration #razorpay payment gateway integration in asp.net c#

Justen Hintz

1663559281

To-do List App with HTML, CSS and JavaScript

Learn how to create a to-do list app with local storage using HTML, CSS and JavaScript. Build a Todo list application with HTML, CSS and JavaScript. Learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List With Local Storage</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="new-task">
        <input type="text" placeholder="Enter The Task Here..." />
        <button id="push">Add</button>
      </div>
      <div id="tasks"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #0b87ff;
}
.container {
  width: 90%;
  max-width: 34em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#new-task {
  position: relative;
  background-color: #ffffff;
  padding: 1.8em 1.25em;
  border-radius: 0.3em;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
}
#new-task input {
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #d1d3d4;
  padding: 0.8em 0.5em;
  color: #111111;
  font-weight: 500;
}
#new-task input:focus {
  outline: none;
  border-color: #0b87ff;
}
#new-task button {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1em;
  background-color: #0b87ff;
  color: #ffffff;
  outline: none;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
}
#tasks {
  background-color: #ffffff;
  position: relative;
  padding: 1.8em 1.25em;
  margin-top: 3.8em;
  width: 100%;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  border-radius: 0.6em;
}
.task {
  background-color: #ffffff;
  padding: 0.3em 0.6em;
  margin-top: 0.6em;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #d1d3d4;
  cursor: pointer;
}
.task span {
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
}
.task button {
  color: #ffffff;
  padding: 0.8em 0;
  width: 2.8em;
  border-radius: 0.3em;
  border: none;
  outline: none;
  cursor: pointer;
}
.delete {
  background-color: #fb3b3b;
}
.edit {
  background-color: #0b87ff;
  margin-left: auto;
  margin-right: 3em;
}
.completed {
  text-decoration: line-through;
}

Javascript:

//Initial References
const newTaskInput = document.querySelector("#new-task input");
const tasksDiv = document.querySelector("#tasks");
let deleteTasks, editTasks, tasks;
let updateNote = "";
let count;

//Function on window load
window.onload = () => {
  updateNote = "";
  count = Object.keys(localStorage).length;
  displayTasks();
};

//Function to Display The Tasks
const displayTasks = () => {
  if (Object.keys(localStorage).length > 0) {
    tasksDiv.style.display = "inline-block";
  } else {
    tasksDiv.style.display = "none";
  }

  //Clear the tasks
  tasksDiv.innerHTML = "";

  //Fetch All The Keys in local storage
  let tasks = Object.keys(localStorage);
  tasks = tasks.sort();

  for (let key of tasks) {
    let classValue = "";

    //Get all values
    let value = localStorage.getItem(key);
    let taskInnerDiv = document.createElement("div");
    taskInnerDiv.classList.add("task");
    taskInnerDiv.setAttribute("id", key);
    taskInnerDiv.innerHTML = `<span id="taskname">${key.split("_")[1]}</span>`;
    //localstorage would store boolean as string so we parse it to boolean back
    let editButton = document.createElement("button");
    editButton.classList.add("edit");
    editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
    if (!JSON.parse(value)) {
      editButton.style.visibility = "visible";
    } else {
      editButton.style.visibility = "hidden";
      taskInnerDiv.classList.add("completed");
    }
    taskInnerDiv.appendChild(editButton);
    taskInnerDiv.innerHTML += `<button class="delete"><i class="fa-solid fa-trash"></i></button>`;
    tasksDiv.appendChild(taskInnerDiv);
  }

  //tasks completed
  tasks = document.querySelectorAll(".task");
  tasks.forEach((element, index) => {
    element.onclick = () => {
      //local storage update
      if (element.classList.contains("completed")) {
        updateStorage(element.id.split("_")[0], element.innerText, false);
      } else {
        updateStorage(element.id.split("_")[0], element.innerText, true);
      }
    };
  });

  //Edit Tasks
  editTasks = document.getElementsByClassName("edit");
  Array.from(editTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      //Stop propogation to outer elements (if removed when we click delete eventually rhw click will move to parent)
      e.stopPropagation();
      //disable other edit buttons when one task is being edited
      disableButtons(true);
      //update input value and remove div
      let parent = element.parentElement;
      newTaskInput.value = parent.querySelector("#taskname").innerText;
      //set updateNote to the task that is being edited
      updateNote = parent.id;
      //remove task
      parent.remove();
    });
  });

  //Delete Tasks
  deleteTasks = document.getElementsByClassName("delete");
  Array.from(deleteTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      e.stopPropagation();
      //Delete from local storage and remove div
      let parent = element.parentElement;
      removeTask(parent.id);
      parent.remove();
      count -= 1;
    });
  });
};

//Disable Edit Button
const disableButtons = (bool) => {
  let editButtons = document.getElementsByClassName("edit");
  Array.from(editButtons).forEach((element) => {
    element.disabled = bool;
  });
};

//Remove Task from local storage
const removeTask = (taskValue) => {
  localStorage.removeItem(taskValue);
  displayTasks();
};

//Add tasks to local storage
const updateStorage = (index, taskValue, completed) => {
  localStorage.setItem(`${index}_${taskValue}`, completed);
  displayTasks();
};

//Function To Add New Task
document.querySelector("#push").addEventListener("click", () => {
  //Enable the edit button
  disableButtons(false);
  if (newTaskInput.value.length == 0) {
    alert("Please Enter A Task");
  } else {
    //Store locally and display from local storage
    if (updateNote == "") {
      //new task
      updateStorage(count, newTaskInput.value, false);
    } else {
      //update task
      let existingCount = updateNote.split("_")[0];
      removeTask(updateNote);
      updateStorage(existingCount, newTaskInput.value, false);
      updateNote = "";
    }
    count += 1;
    newTaskInput.value = "";
  }
});

Build a Todo list app in HTML, CSS & JavaScript | JavaScript for Beginners tutorial

Build a Todo List App in HTML, CSS & JavaScript with LocalStorage | JavaScript for Beginners

To Do List using HTML CSS JavaScript | To Do List JavaScript

Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript

#html #css #javascript

Carmella Blick

1661173238