https://github.com/block-core/blockcore-widget
Interactive payment widget
https://github.com/block-core/blockcore-widget
Last synced: 8 months ago
JSON representation
Interactive payment widget
- Host: GitHub
- URL: https://github.com/block-core/blockcore-widget
- Owner: block-core
- License: mit
- Created: 2023-08-15T11:53:25.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-17T19:20:28.000Z (almost 3 years ago)
- Last Synced: 2025-10-07T18:40:07.197Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@blockcore/widget
- Size: 59.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blockcore Widget
Interactive payment widget for Blockcore chains.
## Usage
You can either manually add attributes needed for the widget, or render using a serverside or clientside runtime.
```html
```
The above is the initial setup, but you need to configure network, amount, etc. There are no default values.
```
```
You can change the attribute on-the-fly using JavaScript:
```
const widget = document.querySelector("blockcore-widget");
const urlParams = new URLSearchParams(window.location.search);
widget.amount = urlParams.get("amount") ?? "0";
```
### Styling
You can override the default styling by either creating classes that overrides the built-in classes (e.g. `.blockcore-widget-amount`), or you can use CSS variables.
```css
html {
--foreground: black;
--background: white;
--accent: #dfab3c;
--radius: 20px;
--depth: 15px;
}
```
These can also be applied directly on the widget, if you want it to have separate color schemes than rest of website.
## Example usage
Blockcore is hosting an pay link service that utilizes the widget, check it out here:
[https://pay.blockcore.net/...](https://pay.blockcore.net/?network=CITY&amount=100.59&address=CJsbsaQPmb65cpnpghxrz3ccz8fPC1nohE&label=Invoice%2055&message=Here%20is%20your%20invoice%20and%20we%20hope%20you%20can%20pay%20it%20as%20soon%20as%20possible.%20Thanks!&reference=55&data=23-55)