1.0.10 • Published 10 months ago
credissuer-browser-based-verify-sdk v1.0.10
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.