1.0.10 • Published 7 months ago

credissuer-browser-based-verify-sdk v1.0.10

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

CredIssuer Browser-Based Verify SDK

This package provides a simple way to integrate credential verification into your web applications using the CredIssuer API.

Installation

To install the package, run:

npm install credissuer-browser-based-verify-sdk
Usage
For HTML Integration
Include CSS and Script Files

In the <head> section of your HTML file, include the following links to the SDK's CSS and JavaScript files:

html

<link rel="stylesheet" href="../dist/credissuerStyles.css" />
<script type="text/javascript" src="../dist/bundle.js" type="module"></script>
Set Up the Configuration

Add the following script in the <body> tag to set the configuration and handle file uploads:

html

<script>
  window.onload = () => {
    setConfig(
      "https://app.credissuer.com/api/credentials/verify/details",
      "8cf3cd8522b8a95a80c511bf8c02ac5ecda77913"
    );
  };

  async function handleFileChange(e) {
    const file = e.target.files[0]; // Get the first file from the file input

    UploadFile(file)
      .then((resp) => {
        console.log("UploadFile from HTML page >>> ", resp);
      })
      .catch((err) => {
        console.log("Error from HTML page >>> ", err);
      });
  }
</script>
Create File Input Component

Include a file input element for users to upload their files:

html

<div class="file-upload-container">
  <label for="file-upload" class="custom-file-upload">
    <img src="../dist/credissuerLogo.png" width="25rem" height="25rem" alt="" />
    Choose File
  </label>
  <input id="file-upload" type="file" onchange="handleFileChange(event)" />
  <span id="file-name">No file chosen</span>
</div>
Update File Name Display

At the end of the body, add a script to handle file name display:

html

<script>
  document.getElementById("file-upload").addEventListener("change", function (e) {
    const fileName = e.target.files[0] ? e.target.files[0].name : "No file chosen";
    document.getElementById("file-name").textContent = fileName;
  });
</script>
For React Integration
Import the SDK in Your Component

In your React component, import the necessary functions from the SDK and the CSS file:

javascript

import React, { useEffect } from 'react';
import { setConfig, UploadFile } from 'credissuer-browser-based-verify-sdk';
import 'credissuer-browser-based-verify-sdk/dist/credissuerStyles.css';
Set Up the Configuration

Use the useEffect hook to set the configuration on component mount:

javascript

useEffect(() => {
  setConfig(
    "https://app.credissuer.com/api/credentials/verify/details",
    "8cf3cd8522b8a95a80c511bf8c02ac5ecda77913"
  );
}, []);
Handle File Upload

Create a function to handle file selection and uploading:

javascript

const handleFileChange = async (event) => {
  const file = event.target.files[0];
  try {
    const response = await UploadFile(file);
    console.log("UploadFile response: ", response);
  } catch (error) {
    console.error("Error during file upload: ", error);
  }
};
Create File Input Component

Add a file input element to your component's return statement:

javascript

return (
  <div className="file-upload-container">
    <label htmlFor="file-upload" className="custom-file-upload">
      <img
        src={require('credissuer-browser-based-verify-sdk/dist/credissuerLogo.png')}
        width="25rem"
        height="25rem"
        alt="CredIssuer Logo"
      />
      Choose File
    </label>
    <input id="file-upload" type="file" onChange={handleFileChange} />
    <span id="file-name">No file chosen</span>
  </div>
);
Update File Name Display

Add an event listener to update the displayed file name:

javascript

const updateFileName = (event) => {
  const fileName = event.target.files[0] ? event.target.files[0].name : "No file chosen";
  document.getElementById("file-name").textContent = fileName;
};

<input id="file-upload" type="file" onChange={(e) => { handleFileChange(e); updateFileName(e); }} />


### Key Points:
- The document provides clear instructions for both HTML and React integration.
- Each section is organized for easy readability, making it straightforward for developers to implement the SDK in their projects.
- Examples of code snippets are included to illustrate how to use the SDK effectively.
1.0.9

7 months ago

1.0.8

7 months ago

1.0.7

7 months ago

1.0.10

7 months ago

1.0.6

8 months ago

1.0.5

8 months ago

1.0.4

9 months ago

1.0.3

9 months ago

1.0.2

9 months ago

1.0.1

9 months ago

1.0.0

9 months ago