Our Latest Blog Posts

latest-post

In our previous blog, we had seen how to integrate stripe connect. Now we are going to see how we can split payments to the application and vendor using stripe checkout.

Let's take a simple example :

The platform is "Shopify", Merchant (Who is selling products on Shopify) & Customer who is going to register with Shopify.

Now When a customer purchases a product with $1000, Now $10 will be considered as an application fee, which is going to transfer to the Platform Account and the rest amount $90 will be transferred to Merchant.

Create Session using Stripe Checkout

public function generationSession($data)
{
    $session = \Stripe\Checkout\Session::create([
        'payment_method_types' => ['card'],
        'customer_email'       => $data['email'],
        'line_items'           => [
            [
                'name'     => "item name here",
                'amount'   => floatval($data['amount']) * 100,
                'currency' => 'usd',
                'quantity' => '1',
            ],
        ],
        'client_reference_id'  => $data['reference_id'],
        'success_url'          => url('payment-success').'?session_id={CHECKOUT_SESSION_ID}',
        'cancel_url'           => url('failed-payment?error=payment_cancelled'),
        'payment_intent_data'  => [
            'application_fee_amount' => $data['application_fees'] * 100,
            'transfer_data'          => [
                'destination' => $data['user']->stripe_connect_id,
            ],
        ],
    ]);

    return $session;
}

It will return the session object return, later you can use the session id to redirect to stripe checkout.

Redirect to checkout using StripeJS

        fetch('/generate-sesssion', {
            method: 'POST',
        })
        .then(function(session) {
            return stripe.redirectToCheckout({ sessionId: session.id });
        });

Check the transaction from your Stripe Dashboard

Once you do the transaction successfully, you can verify whether the application fee is applied or not from your stripe dashboard.

Hope this tutorial helps you.

July 13, 20231 minuteuserVishal Ribdiya

Posts

Why to use Figma over other UI Design Tools?

The field of design is rich in tools and software that make the process of designing simple and rapid. Many firms have developed tools for designers to make the wireframing and prototype process more fluid. However, one piece of software has had the most influence on the market: Figma.

Figma is a design and user interface tool that runs on the cloud. The UX/UI design industry was able to enhance workflow and get creative because of its live collaboration, cloud-based design, and easy tools. Let's look at why you should know about Figma and what Figma can accomplish that other design tools can't in order to grasp how and why this tool took the design industry by storm.

Real-time collaboration

Real-time collaboration is available in Figma, which implies that everything the designer generates is done in real-time. It may be viewed by anybody with the link and permission. On the same canvas, developers may code as designers work on the next page. They may also leave each other remarks. Figma also enables unlimited people in a single file, in addition to Live Collaboration with no latency or crashes. This eliminates the need for huge teams to tag in and out members.

real-time-collaboration

Browser-Based

Figma is a browser-based design tool, so all you need is an internet connection and a good browser to get started. You can work even if your internet is down, and it will autosave when the connection is restored. You're no longer restricted to a single device or platform when you use a cloud-based app. Other popular tools confine you to a single device, generating issues for people who operate across many devices.

browser-based

Advanced Prototyping

Figma is a fantastic tool for prototyping user interface and user experience ideas. With powerful yet simple-to-use capabilities, it allows you to develop interactive flows right in the design file. Overlays, move-in, and move-out animations, smart animate property, interactions with a long press, hover, after delay, clicks, and most recently, scrolling animation are just a few of the features available. You may convert your static designs into a realistic rendition of your website or product in only a few minutes.

advanced-prototyping

Easy Handoff

Figma features a built-in inspection tool. As a result, there is no need to employ another tool for handoff. Apart from CSS codes, Figma's handoff also includes iOS and Android codes. You and your colleagues may see and copy the existing code and data for your designs using the Inspect tab. To make the development process easier, copy single line items or complete sets of values.

easy-handoff

Crash-free Zone

Figma saves your work by adding checkpoints to the version history of the file. After 30 minutes of inactivity in the file, as well as if you lose your internet connection or Figma fails, it creates a new checkpoint. This implies that your work will be saved even if you shut the tab. When working on a volatile device, the autosave/auto-backup feature will come in handy, and it also includes version control. You'll be able to restore lost projects thanks to Figma's built-in automated backup mechanism.

crash-free-zone

Figma Community

Figma is home to a fantastic community of designers and engineers. They make plugins for designers and make their work available for anyone to utilize. Thousands of custom-made files and Figma plugins created by Figma users for Figma users may be found in the community. This means you won't have to start from zero on each project; there will be no learning curve and no time wasted figuring out how to automate things. You may grab and go from the Figma Community.

figma-community

Thank you for taking the time to read, I hope I was able to provide you with useful knowledge. Our articles are written with utmost dedication and are based on the Designers Learning Experience Team's research.

April 01, 20224 minutesauthorKishan Savaliya
Why Should Use CSS Variables?

A variable gives us the ability to store a value inside it and then reuse it throughout the code. CSS variables make our work easier and more manageable.

Imagine you have a large project and you have to make changes to the fonts and colors. Now, one common way to do that is by changing them all manually and individually. But this is a nightmare and there are chances that you might miss something.

But with the use of CSS variables, you can do it with a few keystrokes. You just have to change the value of the variable where you have defined it and that's it. So you see that this is where CSS variables come in handy. And CSS variables can be accessed and modified in JavaScript.

Syntax of CSS variables

.root { 
     --primary-color: #151515;
}
  • A CSS variable is defined by adding double hyphens before your property name that follows the property name.
  • The property name could be anything. You can name it whatever you want, but try giving them a reasonable name.
  • After that, you give value to that. CSS variables are case sensitive so be careful while declaring and using one.

To use a CSS variable we use a function called var(). This function recalls the value of the variable and returns it.

Use of the variable:

.title {
     color: var(--primary-color);
}

The above code will set the value of .title class selector's color to #151515.

Scopes of CSS variables :

CSS variables have two scopes

  • Global
  • Local

Global scope :

A variable is said to be in global scope if it is defined in the highest level possible. For that, we use the : root selector for declaring the variables.

:root {
    --text-font-family: sans-serif; 
}

A global scope variable can be accessed anywhere in the code. And you can also modify it.

Local scope :

We can restrict the use of CSS variables to a specific element by declaring in a low-level selector.For example, using it for a specific class.

.container {
     --main-color:#151515;
} 

.container .heading { 
     color: var(--main-color);
} 

Now this variable can only be used by .container selector or its child elements, And all the elements inside .container will initially inherit this property, but elements outside of .container cannot use it.

Overriding CSS variables :

CSS variables can be overridden. If in any part of your code you want to change the value of the variable you can do that.

This is possible by accessing the variable in the local scope and giving it another value.

:root {
     --text-color red; 
}

header {
    --text-color: green; 
    color: var(--text-color); /*color: green*/
}

footer {
    --text-color: blue; 
    color: var(--text-color); /*color: blue; */
}

Now, overriding only works for the element that it is overridden in.

And all the elements inside header and footer tags will get the new property value.

March 30, 20222 minutesauthorPayal Pansuriya
How to Check the Visibility Keyboard in Android?

The keyboard is one of the basic components of any Android application. Typically, we use the keyboard to take input from the user. Soft keyboards are used in Android applications, and the Android system gives you with a keyboard to receive user input in any EditText or anything similar. Also, the keyboard will be invisible from the screen if the user has given input. So, in this blog, we will learn how to check if keyboard appears in Android app. How can I make this keyboard invisible or turn it off if it is visible?. So, let's get started.

Step 1 − Create a new project in Android Studio, Add the following code to activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
   xmlns:android = "http://schemas.android.com/apk/res/android"
   xmlns:app = "http://schemas.android.com/apk/res-auto"
   xmlns:tools = "http://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:id = "@+id/main_layout"
   tools:context = ".MainActivity">
   <EditText
      android:id = "@+id/editext"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content">
   </EditText>
   <Button
      android:id = "@+id/button"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:text = "Click here to hide"
      app:layout_constraintBottom_toBottomOf = "parent"
      app:layout_constraintLeft_toLeftOf = "parent"
      app:layout_constraintRight_toRightOf = "parent"
      app:layout_constraintTop_toTopOf = "parent" />
</android.support.constraint.ConstraintLayout>

Step 3 − Add the following code to MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
   ConstraintLayout constraintLayout;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Button button = findViewById(R.id.button);
      EditText editText=findViewById(R.id.editext);
      editText.requestFocus();
      constraintLayout=findViewById(R.id.main_layout);
      constraintLayout.getViewTreeObserver().addOnGlobalLayoutListener(new  ViewTreeObserver.OnGlobalLayoutListener() {
         @Override
         public void onGlobalLayout() {
            Rect r = new Rect();
            constraintLayout.getWindowVisibleDisplayFrame(r);
            int screenHeight = constraintLayout.getRootView().getHeight();
            int keypadHeight = screenHeight - r.bottom;
            if (keypadHeight > screenHeight * 0.15) {
               Toast.makeText(MainActivity.this,"Keyboard is showing",Toast.LENGTH_LONG).show();
            } else {
               Toast.makeText(MainActivity.this,"keyboard closed",Toast.LENGTH_LONG).show();
            }
         }
      });
      button.setOnClickListener(this);
   }

   @Override
   public void onClick(View v) {
      switch (v.getId()) {
         case R.id.button:
         hideSoftkeybard(v);
         break;
      }
   }

   private void hideSoftkeybard(View v) {
      InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
      inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(), 0);
   }
}

Here, we are using hideSoftKeyboard to hide the keyboard if the keyboard is visible on clicking the button.

So, finally, run the application and see the output on your mobile device.

In this blog, we learned how to check if the keyboard is visible or not on the screen. Also, we have if the keyboard is visible then how to close it. That’s it for this blog.

March 01, 20222 minutesauthorVivek Beladiya
User Interface Design Tips: Checkbox vs Toggle Switch

In practically every form of mobile or desktop application, website, or interface, interactivity, or user input, is anticipated. While utilizing an interface, users enter personal information, modify application settings, and navigate through various menus. It is our obligation as designers to give users the appropriate controls to make these inputs easier and faster.

Toggle switches and checkboxes, two of the most ubiquitous controls, appear to achieve the same goal, and their use cases are frequently misinterpreted as a result. However, there are a few circumstances where one or the other should be used. This blog will discuss the differences between checkboxes and toggle switches, as well as when each should be used in your user interfaces.

How to Tell the Difference Between Checkbox and Toggle Switches

There are two possibilities for checkbox controls: chosen and not selected. When the user can choose from any of the alternatives listed, the checkbox should be used. The checkbox will normally require buttons such as "Submit, OK, Next, Apply" after the box has been checked.

A toggle switch, like a light switch, represents a physical switch and is a "either/or" control that allows users to turn things on or off. The impacts of switching a light switch are felt quickly, much like flipping a light switch. Toggle switches in the user interface have the same trait.

Switches can assist mobile users in a variety of ways. In comparison to checkboxes, switches have a larger touchpoint to engage with and can deliver greater haptic feedback.

A toggle switch requires two steps: selection and execution, whereas a checkbox requires only the selection of an option, and the execution/saving action is normally required later or at a different area.

A few use-cases are provided below to assist you in determining which control is best for your user interface.

When to Use a Toggle Switch

  • Without review or confirmation, an immediate response is required.
  • An on/off or show/hide operation is required for a setting.

darkmode_gif

When to Use Checkboxes

  • Before submitting any options, the user must confirm or evaluate them.
  • For modifications to take effect, the user must take additional actions.

checkbox-01

  • There are several possibilities accessible, and the user must choose one or more of them.

checkbox-02

  • There is only one yes/no option, or only one alternative may be picked, and the message is evident.

checkbox-03

  • You want to provide two alternatives for an on/off decision when the user is toggling separate features or behaviors.

checkbox-04

Focus on context rather than function when choosing between a switch and a checkbox. Consider if a setting should take effect right away. Ask yourself whether users need to check their settings before they apply them.

March 29, 20222 minutesauthorKishan Savaliya
GUI Testing brief note for Software Testers

What is GUI Testing?

GUI Testing is a type of testing in which an applications’ Graphical User Interface (GUI) is tested to make sure it is in line with the expectations. GUI testing involves checking the objects on the UI (User Interface), which are the objects that we can see on the screen. Anything the user sees in the system or application is a GUI. Let us consider that if you visit a website, then the homepage is the GUI (graphical user interface) of the site. The source code will not be visible as the user can see only the UI interface. Mainly the focus of GUI testing is on the design pattern, images, alignment, spellings and the overall look and feel of the UI.

Why do we need GUI testing?

To get the answer you need to think as a user, not as a tester. It is the User Interface of the Software/Application that is a deciding factor to know whether a user is going to use the Application further or not. The looks and designs of the Application/Software are what a typical user will first look at. Secondly, he checks how easy it will be for him to understand and navigate through the UI. If the Software/Application is more complex and not appealing or if the user is not comfortable with the Interface design, then he is not going to use that Application again. That’s the reason, GUI testing is a matter for concern and should be taken very seriously. Also, proper testing should be carried out in order to make sure that GUI is free from any issues.

How to create test cases and how to do GUI testing?

UI Testing mostly involves the checking the various elements on the screen for their look and feel, the test cases should be written in such a way that they validate the following points for each of the UI objects. Size, position, width, and height of the objects with reference to other objects on the screen, Error messages displayed on the screen, the color and font of the error message. Errors are normally in Red color. Readable and inconsistent across the application unless specified by the client. Checking the same screen in different resolution with the help of zooming in and zooming out like 640 x 480, 600×800, etc. Also if there is a requirement you may want to check it in a mobile browser as well. Font color, hyperlink color, error/warning message color, etc. Quality of the images on the screen, if applicable. Spellings, grammar, and punctuations. Scrollbars according to the size of the page if any. Checking disabled fields if any. Checking the size of the images.

Challenges in GUI Testing:

The list of GUI test cases can be very exhaustive and time-consuming and it requires a lot of manual effort and the quality of the testing would depend on the skills of the tester. Number of automation tools available is very limited GUI is usually unstable during the initial development phases, so GUI testing is postponed to the end of the testing cycle, which sometimes creates a time crunch.

March 09, 20223 minutesauthorNayan Patel
Common CSS Mistakes Should be Avoid

Using PX when it's not Needed

Bad

.class-name {
    padding: 10px 0px;
}

Good

.class-name {
    padding: 10px 0;
}

Not Using Shorthand Properties

Bad

.class-name {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

Good

.class-name {
    margin: 10px;
}

Using Font Fallback

Bad

.class-name {
    font-family:Helvetica; 
}

Good

.class-name {
    font-family:Arial, Helvetica, sans-serif; 
}

Repeating the Same code

Bad

.class-name {
    margin: 10px;
    padding: 10px;
}

.other-class-name {
    margin: 10px;
    padding: 10px;
}

Good

.class-name, .other-class-name {
    margin: 10px;
    padding: 10px;
}

Over Qualifying Selectors

Bad

.navbar ul.menu li a {
   color: #000000
}

Good

.menu a {
    color: #000000
}

Using Color Names

Bad

.class-name {
    color: black
}

Good

.class-name  {
    color: #000000
}
March 15, 20221 minuteauthorPayal Pansuriya
How To Increase Sales Through Digital Marketing

Introduction

Digital marketing can increase sales if we choose the best strategies.

Being an influential and well-known brand in your audience is something that is essential and positive.

Be available to your customers

75% of consumers expect to find a solution to their problem within five minutes of facing it. If you do not provide a solution, there is a good chance that they will not return to your business.

The online world is 24/7, so when you're not actively available to your customers, it's important that you set up a live chat, even if it's a bot.

Excessive communication with your customers

Transparency is key in the digital world. Trust is especially important where face-to-face communication is limited.

Building trust and then delivering on your promises is the key to enhancing the customer experience and ensuring that your brand's reputation is as strong as it can be to ultimately boost sales.

Offers and Discounts

We place some offers or discounts for our business during the festive season etc.

Clicking on Digital Marketing Pay will display advertisements of your business on various social media sites through advertising techniques. This ad will reach all the social media users so your sales will increase.

Use social networks

Social networks are very helpful in maintaining the reputation of your brand.

People like to have a unique experience with your brand on different social media channels. You need to choose the right channels for your business.

Create videos for YouTube

YouTube is an online video platform with millions of users and viewers every day. You should use these leading platforms as they can help your business grow through video views alone.

Videos can be made by you, your team, or (for more professional videos), videographer or photographer. Make sure your content is relevant to your audience or create videos specifically related to your business.

March 15, 20222 minutesauthorAnkit Kalathiya
How to Connect Gatsby to WordPress

Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.

WordPress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Integrate Gatsby with WordPress

Install gatsby-source-wordpress package

npm install gatsby-source-wordpress

gatsby-config.js file

add the gatsby config file in the following code

 plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Now connect your gatsby website and Wordpress.

Here is an example of the GraphQL API query

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
        </div>
      ))}
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Hope this helps.

February 28, 20221 minuteauthorVatsal Sakariya