# package.json

Published articles for package.json.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Accept E-Commerce Payments Easily with PayPal's Buttons Component

DevFeed: [Accept E-Commerce Payments Easily with PayPal's Buttons Component](<https://devfeed.tech/articles/accept-e-commerce-payments-easily-with-paypal-s-buttons-component-31932.md>)

Original publisher: [Read original article](<https://medium.com/paypal-tech/accept-e-commerce-payments-easily-with-paypals-buttons-component-2b719529e035?source=rss----6423323524ba---4>)

Author: Arit Developer

Published: 2023-10-24T16:07:59Z

Content type: tutorial

Language: en

Sources: [PayPal Technology](<https://devfeed.tech/sources/paypal-technology.md>)

Topics: [API](<https://devfeed.tech/topics/api.md>), [servers](<https://devfeed.tech/topics/servers.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [HTML](<https://devfeed.tech/topics/html.md>), [npm](<https://devfeed.tech/topics/npm.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [back-end](<https://devfeed.tech/tags/back-end.md>), [code](<https://devfeed.tech/tags/code.md>), [credentials](<https://devfeed.tech/tags/credentials.md>), [demo](<https://devfeed.tech/tags/demo.md>), [e-commerce](<https://devfeed.tech/tags/e-commerce.md>), [ecommerce](<https://devfeed.tech/tags/ecommerce.md>), [environment](<https://devfeed.tech/tags/environment.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [github](<https://devfeed.tech/tags/github.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [npm](<https://devfeed.tech/tags/npm.md>), [package-json](<https://devfeed.tech/tags/package-json.md>), [payments](<https://devfeed.tech/tags/payments.md>), [payments-technology](<https://devfeed.tech/tags/payments-technology.md>), [paypal](<https://devfeed.tech/tags/paypal.md>), [programming](<https://devfeed.tech/tags/programming.md>)

### AI overview

A tutorial for integrating PayPal Standard Checkout and its Payment Buttons component into a simple HTML and NodeJS shopping application. It covers prerequisites, sandbox credentials, backend and frontend setup, checkout flow, and custom integration guidance.

### Source excerpt

Accepting online payments is now a universal must-have, catering to everyone from solo entrepreneurs to massive global corporations. PayPal's Standard Checkout allows for seamless integration of PayPal's Payment Buttons component into your e-commerce app, granting you the power to accept online payments. In this guide, I am going to show how to add Standard Checkout to a simple shopping app, built with HTML and NodeJS. Guide Overview Part 1. Prerequisites Part 2a. Basic Integration -- Code Setup Part 2b. Basic Integration -- Checkout Flow Part 3a. Custom Integration -- Code Setup Part 3b. Custom Integration -- Checkout Flow Part 4. Conclusion Part 5. Additional PayPal Payment Integrations Part 1. Prerequisites To complete this integration, you will need the following information: API Credentials (Client ID and Secret) for a PayPal REST app: paste these from your Developer Dashboard. Since we are working in a development environment in this demo, ensure that the Sandbox Toggle is on. Obtain Test API Credentials The username and password for a Personal Sandbox account: you will need this to complete the checkout process. Navigate to Sandbox Accounts under Testing ToolsObtain Personal Sandbox Account login details You can grab the code for our completed Checkout Integration demo from the PayPal Developer GitHub repository. Part 2a. Basic Integration -- Code Setup Navigate to PayPal's Integrate Checkout documentation. The documentation shows you how to set your development environment up: installing npm, verifying your package.json file, and setting up your .env file. Next, you will set up your back-end server and front-end code. The documentation presents the contents of three files: server.js (for the back-end server), app.js (for the client-side logic) and checkout.html (for the user interface). Copy the Backend CodeCopy the Frontend Code Grab these code snippets and paste them into your IDE (Integrated Development Environment). I strongly recommend that you implement the

## Add git version tag after publishing to npm

DevFeed: [Add git version tag after publishing to npm](<https://devfeed.tech/articles/add-git-version-tag-after-publishing-to-npm-37234.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/add-git-version-tag-after-publishing-to-npm/>)

Author: Stanko

Published: 2018-07-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Git](<https://devfeed.tech/topics/git.md>), [npm](<https://devfeed.tech/topics/npm.md>), [git tags](<https://devfeed.tech/topics/git-tags.md>), [version](<https://devfeed.tech/topics/version.md>), [Bash](<https://devfeed.tech/topics/bash.md>), [Script](<https://devfeed.tech/topics/script.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [bash](<https://devfeed.tech/tags/bash.md>), [code](<https://devfeed.tech/tags/code.md>), [git](<https://devfeed.tech/tags/git.md>), [git-tags](<https://devfeed.tech/tags/git-tags.md>), [github](<https://devfeed.tech/tags/github.md>), [npm](<https://devfeed.tech/tags/npm.md>), [package-json](<https://devfeed.tech/tags/package-json.md>), [packages](<https://devfeed.tech/tags/packages.md>), [releases](<https://devfeed.tech/tags/releases.md>), [script](<https://devfeed.tech/tags/script.md>), [version](<https://devfeed.tech/tags/version.md>)

### AI overview

A tutorial shows how to use an npm postpublish script to extract the package version from package.json, create a corresponding Git tag, and push the tag to a remote repository. It explains the Bash commands used for version extraction and automation.

### Source excerpt

TL;DR # If you just want to add git version tag after npm publish add this to your package.json: "postpublish" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags", I advise you to read rest of the post to see what this code does. Because blindly coping code from the internet is probably not the smartest thing to do. Detailed explanation # I maintain couple of npm packages, and I wanted to add git tags for every version I publish to npm. It makes things easier to find, and GitHub lists all of them on "Releases" page. First thing to solve was to extract current version from package.json. I found a snippet on the internet and modified it slightly. This piece of bash code prints out versione.g. 1.0.0 or 0.1.15 from package.json. It looks complicated, but don't worry, I explained everything bellow. PACKAGE_VERSION=$(cat package.json \ | grep \"version\" \ | head -1 \ | awk -F: '{ print $2 }' \ | sed 's/[",]//g' \ | tr -d '[[:space:]]') echo $PACKAGE_VERSION I wasn't sure what certain lines do, so I did some researchAgain, I don't like blindly pasting code snippets I find on the internet. You should be careful with that. and here is code explained. # prints whole package json cat package.json # filters lines with "version" in them (can be multiple lines) grep \"version\" # pulls only the first line (leaves us with "version": "2.0.3",) head -1 # splits string by ":" and prints the second part (leaves us with "2.0.3",) awk -F: '{ print $2 }' # removes " and , (leaves us with 2.0.3) sed 's/[",]//g' # removes any leftover spaces and new lines tr -d '[[:space:]]' Add it to package.json # To automate this and add tag after every publish to npm, we'll use postpublish script. It is supported by npm, and it will be executed after every npm publish. Only thing left to do is to add tag and push it to origin. I added letter v in front of version numbe

## A Better package.json for the Frontend

DevFeed: [A Better package.json for the Frontend](<https://devfeed.tech/articles/a-better-package-json-for-the-frontend-31231.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/a-better-package-json-for-the-frontend>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2016-12-23T19:46:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [frontend development](<https://devfeed.tech/topics/frontend-development.md>), [Package manager](<https://devfeed.tech/topics/package-manager.md>), [npm](<https://devfeed.tech/topics/npm.md>), [Yarn](<https://devfeed.tech/topics/yarn.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>)

Tags: [better](<https://devfeed.tech/tags/better.md>), [consider](<https://devfeed.tech/tags/consider.md>), [days](<https://devfeed.tech/tags/days.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [frontend-development](<https://devfeed.tech/tags/frontend-development.md>), [gulp](<https://devfeed.tech/tags/gulp.md>), [here-s](<https://devfeed.tech/tags/here-s.md>), [insights](<https://devfeed.tech/tags/insights.md>), [like](<https://devfeed.tech/tags/like.md>), [mandatory](<https://devfeed.tech/tags/mandatory.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [npm](<https://devfeed.tech/tags/npm.md>), [npm-packages](<https://devfeed.tech/tags/npm-packages.md>), [package-json](<https://devfeed.tech/tags/package-json.md>), [setup](<https://devfeed.tech/tags/setup.md>), [tools](<https://devfeed.tech/tags/tools.md>), [webdev](<https://devfeed.tech/tags/webdev.md>), [webpack](<https://devfeed.tech/tags/webpack.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

This article explains how to use package.json as a centralized manifest for a website's frontend packages and workflow tooling. It discusses replacing Bower with npm, and notes that Yarn can manage the same registry with deterministic installs through yarn.lock.

### Source excerpt

Frontend workflow tools like gulp are almost mandatory for webdev these days; here's what I consider to be a better package.json setup