generate-donate-buttons

Install package

npm install generate-donate-buttons

How To Use

import { generateDonateButtons } from "generate-donate-buttons";

To render the buttons, you can specify an existing DIV element on the page or you can add a new DIV with any ID you want to use. Example would be

<div id='donateButtons'></div>

Then to render a set of donation buttons, you need the following javascript code:

  generateDonateButtons({
    payments: [
      {
        url: 'https://paypal.me/designlook'
      },
      {
        url: 'https://account.venmo.com/u/designlook'
      },
      {
        text: "crypto",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M24 45.5A21.5 21.5 0 1 1 39.21 8.81L32 16.05A11.25 11.25 0 1 0 32 32h0l7.24 7.24A21.43 21.43 0 0 1 24 45.5Z"/></svg>',
        url: 'https://commerce.coinbase.com/checkout/0534ae26-a703-4c27-9622-835fdf76f189'
      },
    ],
    // REQUIRED - an existing DIV element with an ID on your page
    // Example: <div id='donateButtons'></div>
    targetDiv: document.getElementById("donateButtons"), 

    // DROPDOWN MENU - OPTIONAL //
    menuType: 'dropdown', // options are 'dropdown' or leave blank for buttons
    menuText: 'Donate', // the text to display in the menu
    menuWidth: '100px', // the width of the menu
    menuClass: 'btn btn-sm btn-info', // the class to apply to the menu button
    menuStyle: 'background:#ae3cbf;color:#fff;border:1px solid #ccc;', // the style to apply to the menu button
    // UI SETTINGS - OPTIONAL //
    hideName: false,
    hideIcon: false,
    iconColor: "black", // "white" or "#fff"
    textColor: "black", // "white" or "#fff"
    orientation: "horizontal",  // horizontal or vertical (for vertical you need to make sure the target div element has narrow width like 200px or 300px)
    btnWrapperStyle: "font-size:.9rem;", // inline css styles
    btnStyle: "border: 1px solid #ccc;",
    btnClass: "", // "btn-sm" or "btn-primary"
  })

Useful Links

Icons https://icon-sets.iconify.design/ Heart Icon: https://github.com/artcoholic/akar-icons Down Arrow: https://github.com/atisawd/boxicons Paypal Icon: https://github.com/krystonschwarze/coolicons Stripe Icon: https://github.com/coreui/coreui-icons Github Icon: https://github.com/ant-design/ant-design-icons Venmo Icon: https://github.com/atisawd/boxicons Patreon Icon: https://github.com/michaelampr/jam

Running NPM package locally

The following was helpful to me in developing this NPM package. Running verdaccio allows you to import a local npm package and use it within JS app locally.

https://verdaccio.org/docs/installation/

1. Create .npmrc file on npm project root content should be 'registry=http://localhost:4873'
2. Create .npmrc file on app project you want to test your new npm package and content should be 'registry=http://localhost:4873'
3. npm unpublish [email protected]
4. npm publish --registry http://localhost:4873

The unpublish is useful so you don't have to keep changing the version # in the package.json. You can stick with the same version and publish it.