Shield-pay-sdk NPM

Shield Pay SDK

Shield Pay SDK is a software development kit designed to integrate Shield Pay functionalities into your applications. This SDK is built using React, TypeScript, and Vite.

Features

User authentication
Payment processing
Transaction management
KYC verification

Installation

To install the SDK, run the following command:

npm install shield-pay-sdk

To test the SDK locally, run the following command:

npm link

Then, in the project you want to import the library you should run the following command:

npm link shield-pay-sdk

Usage

Import the necessary components and use them in your application:

import { ShieldButton } from "shield-pay-sdk/dist/index.es";
import "shield-pay-sdk/dist/index.es.css";

function App() {
  return (
    <div>
      <ShieldButton apiKey="API_KEY" />
    </div>
  );
}

Scripts

dev: Start the development server
build: Build the project for production
prepublishOnly: Build the project before publishing
preview: Preview the production build

Development

To run the development server the vite.config.ts should look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Build

To build the project and be able to link/publish the library the vite.config.ts should look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import postcss from "rollup-plugin-postcss";

export default defineConfig({
  plugins: [
    react(),
    postcss({
      extract: true,
      modules: false,
      minimize: true,
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "shieldpay-button",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

For last, to those files ending with .es.js, remove the .es:

index.es.js --> index.js
index.es.css --> index.css

And also, create the types file init (index.d.tsa):

declare module 'shield-pay-sdk';

Publish

Publishing a private dependency on npm involves specific steps to ensure the package is accessible only to authorized users or teams. Here's how to do it:

1. Create an npm Account

If you don't have an npm account, sign up at npmjs.com.
Log in to your account via the terminal using:
```
npm login
```
Enter your username, password, and email.

2. Publish the Package

Build the project, move to dist directory.
Publish the package using the following command:
```
npm publish
```

3. Update the Package

If you need to update the package, increment the version in package.json and publish again:
```
npm version <patch|minor|major>
npm publish
```
- patch: For bug fixes (1.0.0 → 1.0.1).
- minor: For backward-compatible new features (1.0.0 → 1.1.0).
- major: For breaking changes (1.0.0 → 2.0.0).

8. Unpublish a Package

If you need to remove a public package, you can do so with:
```
npm unpublish package-name --force
```
Note: npm has strict policies regarding unpublishing packages. If the package has been published for more than 72 hours, you won't be able to unpublish it without assistance from npm support.

That's it! You now have a public package published on npm. 🚀

- If you need to update the package, increment the version in `package.json` and publish again:
  ```bash
  npm version <patch|minor|major>
  npm publish

Additional Notes:

Costs: Publishing private packages requires a paid npm subscription. Check the plans at npm pricing.
Alternatives: If you don't want to pay for npm, you can use other private registries like GitHub Packages or set up your own private npm registry.