Javascript

Develop Stunning Applications Easily with Syncfusion

Published Oct 31, 2019

Updated Feb 14, 2023

11 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Syncfusion is a software framework vendor providing the best UI components for software developers since 2001.

Our main focus as developers is to build and deliver software as per the Client's requirements in a limited time and budget. We strive to understand the requirements, build the main architecture of the application, and thereafter, build the actual application.

Syncfusion understands the priorities in the software development lifecycle. It takes some pressure off the developer and frees them to focus on other areas. Instead of building all the basic components you need in an application, (File Uploader, PDF Viewer, Grid, AutoComplete control, Rich Text Editor) Syncfusion has these components ready for you, well developed, well tested, and ready for use.

Syncfusion offers over 1000 components across countless supported platforms to make software development easier and more efficient.

In this article, we will explore the different component suites offered by Syncfusion. The focus will be on the Angular components and finally a sample application to demonstrate how to easily use Syncfusion components.

Syncfusion Components

Syncfusion provides UI components for a variety of frameworks and platforms. This includes Windows Forms, WPF, ASP.NET (Web Forms, MVC, Core) Xamarin, JavaScript, Angular, Blazor, Vue, and React.

The components are served in packages. For instance, when developing with Angular, you would only install the packages for Syncfusion Angular.

Here's a list of the supported platforms and their corresponding components.

Web (Essential JS 2)

Mobile

Desktop

WinForms
WPF

File Formats

The File Formats libraries are unique. They allow you to manage Excel, PDF, Word, and PowerPoint from within your application without the need to install Excel, Word or PowerPoint software locally on your machine and without any interop dependencies.

In addition to the platforms, and components provided, Syncfusion offers a rich set of documentation to help you understand their components, how to install them, how to customize them and run them in your applications.

Angular UI Components Library

Angular ecosystem is well supported by the Syncfusion Angular UI components library. The suite contains over 70 Angular components.

The Angular UI components are characterised by:

Being native components built from the ground up for Angular
The components can be used and integrated within different Angular environments including:
Wide range of browser support including:
- Chrome (Latest)
- Firefox (Latest)
- Opera (Latest)
- Edge (13+)
- IE (11+)
- Safari (9+)
- IOS (9+)
- Android (4.4+)
A detailed API Reference for all the classes, services, components, and other objects used
Built-in themes including:
- Google’s Material
- Microsoft Office Fabric
- Bootstrap 3 and 4
- High Contrast

You can check the themes page for more details on the different themes available, and supported.

In addition, you can customize any theme, and download it for your application. You may have a look at the Theme Studio page.

Common Features

The Angular UI components library has a set of common features, and APIs, that are universal when using any of the components in the suites.

The features are:

The Animation library. This is a built-in animation library by SyncFusion to help with animating controls.

For example, that's how you would Fade In or Out an element on a page:

let animation: Animation = new Animation({ name: 'FadeIn', duration: 5000 });
animation.animate(this.element1.nativeElement, { name: 'FadeOut' });

Localization using load() and L10n class. This library helps you in building localized apps and support multiple languages and cultures.
Drag and Drop library.

https://gist.github.com/bhaidar/2e3a6e1f09154edd609e386f42793e25

{% stackblitz syncfusion-drag-drop %}

The code snippet defines two HTML divs. The first is the droppable div and the second is the draggable one. Inside the ngAfterViewInit() function two new instances of Draggable and Droppable classes that wrap the two divs defined above.

Run the application and you shall be able to drag and drop a div inside another:

Custom Reactive Form Validators. The Angular UI components suite offers 15 form validators that can be plugged in easily into your application. Here’s a sample demonstrating the use of these validators in a Reactive Form.

{% stackblitz angular-emxs2p %}

Selection of Angular Components

To go through all of the Angular components in depth now isn't useful. I've highlighted a few that interested me and to give you a small overview of what is on offer.

Avatar

The Avatar component is, as the name suggests, used to embed an avatar in your application without having to worry about styles and display.

Barcode

The barcode component is really helpful in many business and e-commerce applications. You can display, and create barcodes easily with this library. In addition, you can generate a variety of codes:

Calendar, Date Picker, DateTime Picker

Almost every application deals with Dates. Personally, working with dates in JavaScript, in general, is a pain in the neck. These components support globalisation via the combination of the internationalisation and localisation libraries. They can be really helpful for your application.

Card component

The Card component allows you to define cards in your HTML templates in no time. No need to import any custom Angular module, just follow two steps to get access to cards in your templates.

Install the following package: npm install @syncfusion/ej2-layouts --save

Then, import the two files inside the [src/styles.css] file:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';

That's all! Now you can embed cards in your templates:

<div class = "e-card">						
	<div class="e-card-header">			
		<div class="e-card-header-caption">	
			<div class="e-card-header-title"></div>
		</div>
		<div class="e-card-content"></div>
	</div>
</div>

Charts

Syncfusion offers a rich set of the native Charts that you can embed, and use in your Angular apps.

Gauges

Gauges are mostly used when building Dashboards. They act as indicators and represent the different KPIs you might have on your Dashboard. Highly recommended for building Dashboard apps for corporate executives.

The suite contains a rich set of Gauges that you can access for your application.

Color Picker

The number one priority when searching for a color picker is to have a cross-browser color picker that is simple and works everywhere. That's exactly what the Color Picker provides by Syncfusion for Angular developers.

Dashboard Layout

The flexible Dashboard Layout component lets you build customizable and draggable layouts for your dashboards. This component can be combined with the Gauges component to give users a personalized Dashboard where they can organize the KPIs the way they see fit.

Here's a step-by-step guide on how to install the Dashboard Layout module into an Angular CLI app.

Dialogs

Dialogs are needed in every application we develop. They bring in UX convenience especially when you plan to make your application available on Tablets and Mobile phones.

Syncfusion Dialogs for Angular are easily installed and are highly customizable.

Document Editor

The Document Editor is more than just a Rich Text Editor. It's a mini Word app in the browser. Syncfusion provides a rich Document Editor that is similar to using Word on a Desktop. It offers many of the features that come with the Word app. These features include Text Formatting, Styles, Lists, Tables, Scrolling and Zooming.

File Manager

The File Manager is so impressive; it allows you to manage your files and folders in the cloud inside a browser. It comes with many baked-in features, including uploading files, deleting files, opening and previewing files, as well as navigating files and folders.

Data Grid

Maybe the Data Grid is the most popular component amongst the lot. With almost every application I've developed, I used a Data Grid to display a list of records. The Syncfusion Data Grid component offers a rich set of features including:

Virtualization. This feature is essential when loading thousands or millions of records inside the browser. With virtualization, only viewed records are being rendered to the DOM. When you scroll down the list of records, more rows will be pulled out and rendered.
Sorting, Grouping, Paging, Scrolling, Filtering, Selection, Aggregation, Printing, Hierarchical binding of data, PDF Export, Excel Export, and much more!

In the sample application below, I will demonstrate using the Data Grid.

InPalceEditor

In-Place-Editor is one of my favorite components. You can build inline-editable forms using it. For instance, you build functionality in Angular Forms. Its role is to make the entire form editable and then make it all read-only. What's unique about this component is, while in read-only mode, the control values will be rendered as labels. Once you click the label, it gets converted to an editable component. The InPlaceEditor control renders a different editor based on the field data type. For instance, a field of type "Text" is rendered as an Input field editor, while a field of type "Date" is rendered as a Calendar field editor.

PDF Viewer

Loading, rendering and commenting on PDF documents in the browser has always been a headache. This is due to the evolving nature of the PDF Standards that keep changing. This makes it hard for any vendor to sync up with the changes in the PDF Standards, and maintain a workable, and robust PDF management tool in the browser.

That's where the Syncfusion PDF Viewer shines. It’s always up to date to make sure it works with the latest PDF standards.

You can build a full-fledged PDF management tool with the ability to add comments, shapes and download a copy of the PDF with all the comments incorporated.

This is THE number one component if you are building any sort of an e-collaboration solution online.

Schedule

The Schedule component renders as a big Calendar control that allows you to register events on specific dates, times or ranges. This is a great component to use in developing apps that require taking appointments, and registering maintenance reminders.

Hands-on Sample App

In this final section of the article, I will implement a basic Github Code Search app that looks like the following:

The user enters a search term to search GitHub repositories. The app then communicates, via the GitHub API, to search GitHub for repositories, and return the matching data.

I will be using Stack Blitz to generate a new Angular project. Here’s the final version of the app at the following URL https://stackblitz.com/edit/ng-github-code-search

Add the Search Bar component

Let's start by adding a Search Bar component to allow the user to enter a search term. In this component, I will be using Syncfusion TextBox control.

First of all, let's install the Syncfusion packages that are needed in order to use the TextBox in the app. Using the Stack Blitz, add the following NPM packages:

@syncfusion/ej2-angular-inputs
@syncfusion/ej2-angular-base
@syncfusion/ej2-inputs
@syncfusion/ej2-base

Now, import the following CSS files into the main [src/styles.css] file as follows:

@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-inputs/styles/material.css';

Create a new Angular component named search-box.component.html, and add the following content:

{% gist https://gist.github.com/bhaidar/1e6d11c4b2705b8ddbf39adf31306435 %}

The markup defines a new Input control with an assigned Template Reference Variable. The code behind this template makes use of RXJS to handle the keyup event received from the input text, and emit a new event accordingly. The payload of the event is the search term itself.

Make sure to import this component inside the app.module.ts file.

Let's make use of the search-bar component inside the app.component.html file as follows:

<app-search-bar (action)="onSearch($event)"></app-search-bar>

When the user finishes typing a search term, the onSearch($event) function fires, and it receives the search term entered.

Implement the GitHub API Search for repositories

Let's add a new Angular Service that contains a single search() function. This function sends a GET request to the GitHub Search API to filter out repositories that match the search term entered by the user.

@Injectable({ providedIn: 'root' })
export class GetHubSearchService {
    constructor(private http: HttpClient) { }

    search(term: string) {
        let params = new HttpParams().set('q', term);
        return this.http.get<GitHubRepositoryModel[]>(`https://api.github.com/search/repositories`, { params });
    }
}

The service defined above contains a single function named search(). This function sends a GET request to the GitHub API located at https://api.github.com/search/repositories with a Query String named q.

The API returns a list of repositories that matches the Query String. The response is wrapped in an Array of GitHubRepositoryModel objects that are defined as follows:

export interface GitHubRepositoryModel {
  id: number;
  name: string;
  full_name: string;
  private: boolean;
  owner: {
    login: string;
    id: number;
    avatar_url: string;
    url: string;
  },
  html_url: string;
  description: string;
  url: string;
  created_at: Date;
  stargazers_count: number;
  watchers_count: number;
  has_issues: boolean;
  forks_count: number;
  score: number;
}

Let's import this service inside the AppComponent, and test the search() function quickly:

export class AppComponent  {

  constructor(private readonly searchService: GetHubSearchService) {}

  public onSearch($event) {
    this.searchService.search($event).subscribe(data => console.log(data));
  }
}

As we saw before, the onSearch() function is executed when the user types a search term.

Searching for the term Syncfusion results in:

Great! The search for GitHub repositories works fine.

Let's define the search-results component to display the results in a Syncfusion Data Grid.

Add the Search Results component

Let's revisit the app.component and prepare the code to pass the list of repository results to the Search Results component that we will create shortly.

Make sure the app.component.ts looks as follows:

{% gist https://gist.github.com/bhaidar/708cbd45aa67c7f2ad9f4c62af368415 %}

The component now defines the results$ observable that will be eventually passed to the Search Results component as an input parameter.

The code makes use of an RXJS Subject to notify of a new search term which will, in turn, execute the results$ Observable and consequently call the search() function. This way our code is reactively built on top of RXJS Observables and Subjects.

On the app.component.html file, replace the content with the following:

<app-search-bar (action)="onSearch($event)"></app-search-bar>
<app-search-results [results]="results$ | async"></app-search-results>

Import the following CSS files, needed by the Data Grid, into the [src/styles.css] file:

@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-grids/styles/material.css';
@import '~@syncfusion/ej2-notifications/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';  
@import '~@syncfusion/ej2-calendars/styles/material.css';  
@import '~@syncfusion/ej2-dropdowns/styles/material.css';  
@import '~@syncfusion/ej2-navigations/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-splitbuttons/styles/material.css';

Install the following NPM package dependencies that are also required by the Data Grid:

@syncfusion/ej2-angular-grids
@syncfusion/ej2-notifications
@syncfusion/ej2-buttons
@syncfusion/ej2-calendars
@syncfusion/ej2-dropdowns
@syncfusion/ej2-navigations
@syncfusion/ej2-popups
@syncfusion/ej2-splitbuttons

To enable column filtering on the Data Grid we need to import the FilterService in the providers section of the module:

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule, GridModule ],
  declarations: [ AppComponent, SearchBarComponent, SearchResultsComponent ],
  providers: [FilterService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Let's create a new Angular component named search-results.component.ts, and add the following content:

{% gist https://gist.github.com/bhaidar/2a9efcc9b899e28ce0fe3120d2b27427 %}

The component defines an input parameter named results. The component template embeds a Syncfusion Data Grid, specifies a collection of columns to render, enables filtering on the Repo Name column only, and customizes the column template for three columns:

Created At column: A custom date display for the created_at column
Stars column: A custom display for the Repo starts as a badge notification
Forks Count column: A progress bar showing the Forks Count as a percentage of the Watchers Count

Let's see the Grid in action:

That was just the tip of the iceberg in terms of what you can do with Syncfusion components for Angular.

Conclusion

Finally, I would like to recommend a strategy for learning, and reading the Syncfusion documentation. Start with the Getting Started section on the documentation page. Then, whenever you need to use a certain component, read its documentation, check all the options it offers, play around with a sample on StackBlitz, and then implement it in your application. Syncfusion offers all of its demos on the StackBlitz platform.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Bilal Haidar
Author, Developer, and Mentor: Professional ASP.NET 3.5 Security, Membership, and Role Management with C# and VB | A Complete Guide to VueJS
@bhaidar @bhaidar

Nuxt.js for Complete Beginners

The Vuejs Amsterdam online conference was held at the end of February in 2021. It brought together Vue.js enthusiasts and community members from around the world. Many interesting topics were presented and covered. The focus, of course, was on Vue.js 3. In addition, the creators of Nuxt.js had the opportunity to showcase it from the current standpoint in development, to their intentions for it down the track. They even demonstrated a pre-alpha version of Nuxt.js 3, that’s based on Vue.js 3. This article will start by briefly covering general Nuxt.js concepts, creating a new Nuxt.js app using the create-nuxt-app CLI, and finally, going through the different files and folders that Nuxt.js auto-generates for us. Let’s start! Nuxt.js Concepts Nuxt.js is a web development framework that builds on top of the Vue.js framework. It allows you to use your Vue.js skills to build a more confident, structured, SEO friendly website purely in Vue.js. Remember when you had to mess with the Vue.js SSR module and the Vue Meta module to build a SEO friendly website? On top of that, you had to install and use Vuex and Vue Router too! Well, Nuxt.js takes care of that! No more chaotic setup and scaffolding to start a new Vue.js app. With the help of the create-nuxt-app CLI, you can scaffold a Nuxt.js app in no time. What’s remarkable about Nuxt.js is its capacity to enforce convention over configuration. This means, you write less configuration files by sticking to a specific directory structure that makes Nuxt.js happy and saves you a ton of time! Apps supported by Nuxt.js Nuxt.js supports building a variety of web apps, including the following: Server-Side Rendering (SSR) SSR apps are also known as Universal Apps. The app gets rendered on the server-side before it is sent to the client-side, and is displayed in the browser. This is the best option when working on an SEO friendly website written in Vue.js. You can read the full documentation for the SSR apps here: SSR Apps Single Page Apps (SPA) This is what you’ve been doing so far with Vue.js. The app is compiled into a few JS and CSS files. When the user requests the app, the files are downloaded to the client-side, and the Vue.js engine takes over rendering and displaying the app. Static Site Generation (SSG) Nuxt.js can pre-render your app at build time. This means the entire app will be converted to simple static HTML files that can be hosted and served over a Content Delivery Network (CDN). The SSG option makes an app a legal JAMStack app. You can read the full documentation for the Static Site Generation here: Static Site Generation. File System Routing Nuxt.js automatically generates all the Vue.js Routes in your app based on the folder structure inside the *pages* folder. For example, consider having this folder structure: ` Nuxt.js automatically generates the following route configuration: ` You can read about *File System Routing* here: File System Routing. Data Fetching Inside a Nuxt.js app, you can still use the old techniques you kmow when developing Vue.js apps. However, we have a new player here! Server-side rendering. Nuxt.js provides a new set of data-hooks that you can implement so that Nuxt.js can prefetch data when generating the app at the server-side. Here are two data-hooks offered by Nuxt.js: fetch() hook This hook was introduced with Nuxt.js 2.12+ release. It can be used inside Vue.js components stored in the *pages* folder and *components* folder. asyncData() hook This hook has been around for a while now, and can be used only inside the Vue.js components stored in the *pages* folder. You can read more about *Data Fetching* hooks here: Data Fetching. Meta Tags and SEO Nuxt.js makes it so intuitive to add SEO support to your SSR app. You can add Metadata to your app at two different levels: - Globally using the *nuxt.config.js* file - Locally inside a Nuxt.js Page You can read about *Meta Tags and SEO* hooks here: Meta Tags and SEO. Create our first Nuxt.js app Let’s use the create-nuxt-app CLI, and create our first Nuxt.js app! Before you start, you want to make sure you have all the perquisites required before you can install and run the CLI. For this article, I am going to use npx. However, you can also use npm, or feel free to use yarn. Step 0 Start by running the following command: ` This command uses the create-nuxt-app tool, and specifies the name of the project- in this case *my-first-nuxt-app*. The CLI will ask you a few questions that are important to scaffold the new Nuxt.js app based on your own preferences and decisions. Here’s what to expect. Step 1 First, let’s confirm the project name as shown in the Figure 1. Give the app a name and hit Enter. _Figure 1: Specify project name_ Step 2 You’ve got to choose whether you want to develop your app with TypeScript or JavaScript. I will select *JavaScript* as shown in Figure 2. _Figure 2: Programming language_ Step 3 Next, you need to choose between Npm or Yarn. I will select *Npm* as shown in Figure 3. _Figure 3: Package manager_ Step 4 In this step, you’ve got to select the UI framework you are going to use in the app. I will select *Tailwind CSS* as shown in Figure 4. Even if you skip this step, you can add any UI framework you want later. _Figure 4: UI framework_ Step 5 Nuxt.js offers a set of modules that you can use right away in your apps. For this app, I will pick the *Axios* module. Figure 5 shows the selection. _Figure 5: Nuxt.js modules_ Step 6 The CLI makes it super intuitive to integrate linters in your app. I will pick up both *ESLint* and *Prettier*. Figure 6 shows the selection. _Figure 6: Linting tools_ Step 7 Now it’s time to select a testing framework. For the sake of this article, I will select *None*. Feel free to add any. Figure 7 shows the selection. _Figure 7: Testing framework_ Step 8 By default, Nuxt.js supports two rendering modes. SSR/SSG and SPA. I will pick *SSR/SSG* to take advantage of the Server-side rendering. Figure 8 shows the selection. _Figure 8: Rendering mode_ Step 9 The deployment target depends on our selection in Step 8. In this case, we have two options to select from. Server (using a Node.js server hosting) or Static (CDN/JAMStack hosting). I will select the *Server* deployment target as shown in Figure 9. _Figure 9: Deployment target_ Step 10 For the development tools, I will keep it simple and select the *jsconfig.json* option as shown in Figure 10. _Figure 10: Development tools_ Step 11 I won’t be using any continuous integration for this app. I will simply select *None* as shown in Figure 11. _Figure 11: Continuous integration_ Step 12 Finally, the CLI asks whether you want to use any version control system. A version control system is always recommended when doing any kind of development. I will select *Git* as shown in Figure 12. _Figure 12: Version control system_ These twelve questions are enough for the CLI to start scaffolding and generating your app based on your preferences. It takes a few seconds to have everything ready for you. If all goes well, you should see the following as in Figure 13. _Figure 13: create-nuxt-app new app instructions_ The CLI gives you instructions on how to run and build the app. Step 13 Let’s run the app by following the steps highlighted in Figure 13. Run the following commands: ` The CLI compiles both the client and server parts of the app and starts the Node.js server on port 3000 as shown in Figure 14. _Figure 14: App is running_ Step 14 Open a browser instance and navigate to the URL *http://localhost:3000/* and you should see the default Nuxt.js app rendering. Figure 15 shows the app running in a browser. _Figure 15: App rendering in a browser_ That’s all you need to get started on your first Nuxt.js app. Enjoy! Nuxt.js Directory Structure Let’s quickly go through the different folders the CLI generated for us. I will start by opening the new app inside Visual Studio Code. Figure 16 shows the app open inside the editor. _Figure 16: App folders and files_ Let’s go through each folder, and explain their roles briefly. .nuxt The *.nuxt* folder is (re-)generated by the CLI every time you run or build the app. It has all the automatically generated files that Nuxt.js uses to run your app. You can read more about the *.nuxt* folder here: .nuxt. assets The *assets* folder contains all of your uncompiled files such as Sass files, images, or font files. Nuxt.js makes use of Webpack to load all the files inside this folder. You can read more about the *assets* folder here: assets. components This folder holds all of your Vue.js components. Nuxt.js components are not different from any other Vue.js component. Read more about the *components* folder here: components. layouts This folder contains all of your layout components. These are Vue.js components with placeholders for content. At run time, the component and the layout it uses get merged together into a single component. Layouts in Nuxt.js allows you to define fixed UI sections in your app instead of having to repeat things over and over. You can read more about the *layouts* folder here: layouts. pages This folder also holds Vue.js components. It is unique because Nuxt.js converts this folder structure (components with sub-folders) into actual Vue.js Routes. You can read about the *pages* folder here: pages. plugins This folder contains global JavaScript functions that you want to run before Nuxt.js instantiates the root Vue.js app. These functions are called *Plugins*. They can take multiple forms. For instance, you create a Nuxt.js Plugin to load a Vue.js Plugin to your app. You can also install, and make use of a third-party Nuxt.js Plugin. You can read more about the *plugins* folder here: plugins. static The name of this folder says it all! This folder is directly mapped to the server root. You can place any file in this folder that you do not want Webpack to process. For example, you can place a favicon file, any CSS files, and many other such files. You can read more about the *static* folder here: static. store The *store* folder holds all the Vuex store files. Nuxt.js comes with the Vuex module installed, but keeps it disabled. In order to enable the Vue store in your Nuxt.js app, create an *index.js* file inside this folder, and Nuxt.js will automatically enable it for you. You can read more about *store* folder here: store. nuxt.config.js As I mentioned, Nuxt.js prefers convention over configuration. However, at some times you may need to tweak the configuration a little. Nuxt.js provides the *nuxt.config.js* file to allow for custom configuration settings on the app level. Read more about *nuxt.config* file here: nuxt.config. That’s just a quick overview of what folders are generated by the Nuxt.js CLI. There are more you can read up on. You can find all the information you need on Nuxt.js Documentation website. Conclusion In this article, you were introduced to Nuxt.js and took a few baby steps towards creating your first Nuxt.js app. In the coming articles, we will immerse ourselves in the Nuxt.js world, and explore this fresh and promising web development framework together. You can follow me on Twitter to see more of my work....

Mar 22, 2021

12 mins

NuxtJSVue

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Building a Stripe App: A Step-by-Step Guide to QR Code Generation Why Build a Stripe App? I recently participated in an audio space with the Stripe team, and something they said really stuck with me: the Stripe app store is a growing area that isn't overly saturated yet. There's a lot of potential for new apps, and companies can use this opportunity to grow. I work at a company called This Dot Labs, and we've created several Stripe apps and even own one. After looking at the data, I can confirm that the Stripe team was right! Creating a QR Code Generator App For this tutorial, we'll build a QR code app that can take a URL and generate a code for it. This is a good use case to help you understand the ins and outs of Stripe's developer tools. Why QR Codes? QR codes are useful tools that have become common in e-commerce, restaurants, and other industries. While Stripe already has a QR code tool, we'll make our own to familiarize ourselves with their syntax and problem-solving approaches. Project Structure Before we dive into the implementation, let's look at the structure of our Stripe App QR Code project: * .vscode: Contains settings for Visual Studio Code * source/views: Holds the main application views * .gitignore: Specifies files to ignore in version control * stripe-app.json: Defines the Stripe app configuration * ui-extensions.d.ts: TypeScript declaration file for UI extensions * .build: this is where the built Stripe app gets placed. Step-by-Step Implementation 1\. Install Stripe Locally First, you need to install Stripe on your local machine. The documentation provides great instructions for this: * For Mac users: Use Brew to install * For Windows users: Download the package and add it to your environment variables You can find the details here in the stripe docs to install the Stripe CLI https://docs.stripe.com/stripe-cli When using Windows, you must do stripe login from Powershell, NOT from Git bash or any other tool. After the server is up, then you can continue using git bash for everything else. After stripe login, you need to enter stripe apps start. Once you do that, the server is up and running and you can go back to using git bash or any other tool. 2\. Install Dependencies We'll be using an extra package for QR code generation. Install it using npm: ` 3\. Set Up the Main Component Let's look at the home.tsx file, where we'll use Stripe's UI components: ` These components are similar to other UI libraries like Bootstrap or Tailwind CSS. 4\. Create the UI Structure Our app will have: * An input field for the URL * Validation using a regex pattern * Error handling for invalid URLs * QR code generation and display Here is the Home.tsx file that is located in the src/views folder ` * ContextView` is at the top level of the app where we see the Title and the link to the Stripe Docs that we placed in our Context View. * Box is how you use Divs. * Banners can be used to show notification errors or any other item you wish to display. * Textfields are input fields. * Everything else is pretty self-explanatory. 5\. Handle Content Security Policy One problem I personally ran into was when I tried to redirect users, the Stripe policies would block it since I did not express that I knew what it was doing. I had to go into the stripe-app.json file and mention the specific security policies. For this particular exercise, I kept these as null. This is my stripe-app.json file. ` 6\. Configure App Views As you can see here, the stripe-app.json file shows the views for each file I have. The Home.tsx file and the Invoice.tsx are also included This is our way of saying that for each view we have, show the app functionality on that page. Our stripe-app.json file will show it but also, the manifest.js file in our .build folder will also show the same. Any view that doesn't have a file will not show the application's functionality. So, if I were to go to transactions, the app would not show the same logic as the home or invoices page. By following these steps, you'll have a fully functional QR code generator app for Stripe. This is just a simple example, but the potential for Stripe apps is massive, especially for businesses serving e-commerce customers. If you need help or get stuck, don't hesitate to reach out, danny.thompson@thisdot.co. The Stripe team is also very active in answering questions, so leverage them as a resource. Happy coding!...

Dec 18, 2024

4 mins

stripe

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Develop Stunning Applications Easily with Syncfusion

Syncfusion Components

Web (Essential JS 2)

Mobile

Desktop

File Formats

Angular UI Components Library

Common Features

Selection of Angular Components

Avatar

Barcode

Calendar, Date Picker, DateTime Picker

Card component

Charts

Gauges

Color Picker

Dashboard Layout

Dialogs

Document Editor

File Manager

Data Grid

InPalceEditor

PDF Viewer

Schedule

Hands-on Sample App

Add the Search Bar component

Implement the GitHub API Search for repositories

Add the Search Results component

Conclusion

Bilal Haidar

You might also like

Nuxt.js for Complete Beginners

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Let's innovate together!

You might also like

Nuxt.js for Complete Beginners

Building a Stripe App: A Step-by-Step Guide to QR Code Generation