Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/svub/nimiq-popup-shop

A decentralized shop running completely client side, no server needed. Using Nimiq's Hub API and IPFS.
https://github.com/svub/nimiq-popup-shop

blockchain client-side decentralized ipfs library nimiq non-custodial shop webshop

Last synced: 6 days ago
JSON representation

A decentralized shop running completely client side, no server needed. Using Nimiq's Hub API and IPFS.

Awesome Lists containing this project

README 

        
# Nimiq Pop-Up Shop



> The Nimiq Pop-Up Shop can turn any static HTML page into a shop using only decentralized (Web3) technology.



Yello! Nimiq is a blockchain that runs in your browser. You can pay anywhere directly from within your browser. No plugins needed. Cool, so now people can pay client-side - but you still need a server to run a shop. :(



Not any more!
**Nimiq, web crypto, and IPFS FTW!**



The shop is easy to integrate and runs its logic client side - no server needed. :)

The data is encrypted and stored on [IPFS](https://ipfs.io/).

Now that the server is gone, you could even deploy your shop itself to IPFS, no problem.



Support this effort by donating NIM to the developers!



[![Donate NIM](https://www.nimiq.com/accept-donations/img/donationBtnImg/gold-big.svg)](https://safe.nimiq.com/#_request/NQ76YRKFTFVXHXA3HATDDJ0KAH44KCVAKJNS_)



## How to use



**Checkout the deployed example!** As it works in static HTML, here is a dummy shop deployed to GitHub Pages: [https://svub.github.io/nimiq-popup-shop/](https://svub.github.io/nimiq-popup-shop/backend/). And to see the orders coming in, copy the content of [this file](https://svub.github.io/nimiq-popup-shop/demo-private-key.js) -- that's the private key for the demo store -- and then go to [backend/](https://svub.github.io/nimiq-popup-shop/backend/).



## How does it work?



Your website, or say, **your future web shop** is hosted statically somewhere on the web (e.g. [netlify.com](https://www.netlify.com/) or via [GitHub Pages](https://pages.github.com/)) and you added Nimiq Checkout buttons to it. 

Now, your visitors become customers. 

When they buy something, the order with all the details you need (e-mail, shipping address, you choose) are encoded with your public key and stored as a file on IPFS.

The hash of that IPFS file is stored with the transaction when your customer pays you in NIM.

And when you as the shop owner want to see the orders and act on them, 

you just access the statically hosted backend and enter your private key and shop address.

It's safe because everything happens client-side, and secure because only the person with the private key can see the orders. 

Once address and key are entered, 

all transactions for your shop's address will be fetched from the Nimiq blockchain and then, 

all the orders will be fetched from IPFS and decrypt using your private key.



But you don't have to fiddle around with all these steps and details, because it's all packed in this lib so you can just add a button and your visitors will become shoppers. :)



## Setup your own shop



To create a new shop configuration for your own shop, go to the [setup](https://svub.github.io/nimiq-popup-shop/setup.html).

Or check the section at the bottom about how to run the code and access the setup locally at [localhost:3333/backend/setup.html](http://localhost:3333/backend/setup.html).



During the setup, change the config to what you need and store the file as "nimiq-pop-up-shop-configuration.js".



```json

{

  "name": "Nimiq Pop-Up Shop",

  "address": "NQ07 0000 0000 0000 0000 0000 0000 0000 0000",

  "logo": "https://nimiq.com/favicon-96x96.png",

  "live": false,

  "id": "",

  "publicKey": "",

}

```



Add this JavaScript to your page



```html

  

```



And then use the web compenents anywhere in your shop or website:



```html

  <!--

    Configure your shop! (all callbacks are optional)

    * collectmetadata: 

    *   This callback method will be called by the Nimiq Pop-Up Shop when a customer wants to order.

    *   During the callback, you can open a pop-up and as the user for all additional information that you need 

    *   to fulfil the order, e.g. shipping address - or return false to signal that the user wants to cancel the checkout.

    * onsuccess: Checkout was finished successfully.

    * oncancel: The user has cancelled the checkout process.

    * onerror: Something went wrong, the customer could not finish the checkout process.

    * config: 

    *   URL to your config file (see previous section). 

    *   You don't have to set this if you name the file "nimiq-pop-up-shop-configuration.js" and put it in the same folder.

  -->

  <nimiq-shop collectmetadata="getMetadata" onerror="checkoutError" onsuccess="checkoutSuccess">



    <!-- A first product, price in NIM -->

    <nimiq-shop-checkout-button

      product="Product A"

      price="1.0"

      />



    ...



    <!-- And another product -->

    <nimiq-shop-checkout-button

      product="Product B"

      price="123.0"

      />



  </nimiq-shop>

```



## Contribute



This is an early prototype and there's lots to do and even more possibilities.

Check out the [issues](https://github.com/svub/nimiq-popup-shop/issues).



### Run example



```bash

# install dependencies (only once)

npm install

# run the example

npm run start

```



Then open your browser at http://localhost:3333.



### Tests



Run the tests using a headless Chrome browser:



```bash

npm run test

```



More info about automated testing with headless Chrome: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai#run_your_tests



### WebComponent approach



Behind the scenes `LitElement` is used to provide `<nimiq-shop-checkout-button>` as a web component. `LitElement` is just _"a simple base class for creating fast, lightweight web components"_.

https://lit-element.polymer-project.org/



### TypeScript compiler options for `LitElement`



https://lit-element.polymer-project.org/guide/publish#transpiling-with-typescript