GithubHelp home page GithubHelp logo

yosle / paylink Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dlcastillop/paylink

0.0 0.0 0.0 547 KB

A payment organizer

Home Page: https://payme.dlcastillop.com/

License: MIT License

JavaScript 84.91% CSS 0.49% HTML 14.61%

paylink's Introduction

💰 PayLink

PayLink is a payment organizer and an open source alternative to Paynest.

Live example

https://payme.dlcastillop.com/

Features

  • ✅ Select from over 30 themes to customize the appearance of your PayLink page
  • ✅ Add a hero section with a photo, name and description to introduce yourself or your brand
  • ✅ Include up to 18 links to your social media accounts
  • ✅ Add up to 14 payment methods
  • ✅ Add a Google Analytics ID to track your analytics
  • ✅ The users can copy or generate QRCode for each payment method
  • ✅ The users can use the search bar to look for a specific payment method

How to use

You only need to work in the paylink.config.json file.

If you are not a developer, we recommend you to setup your PayLink page using this video (spanish).

Theme

You can modify the theme in the theme property. It accepts 33 values:

  • minimalist-theme
  • minimalist-dark-theme
  • swordfest-theme
  • swordfest-dark-theme
  • light
  • dark
  • cupcake
  • bumblebee
  • emerald
  • corporate
  • synthwave
  • retro
  • cyberpunk
  • valentine
  • halloween
  • garden
  • forest
  • aqua
  • lofi
  • pastel
  • fantasy
  • wireframe
  • black
  • luxury
  • dracula
  • cmyk
  • autumn
  • business
  • acid
  • lemonade
  • night
  • coffee
  • winter

For example:

"theme": "minimalist-dark-theme",

Hero section

The Hero section is going to have your photo, name and description. You can modify it in the properties object which has the following properties.

  • name: your name
  • description: your description
  • alt: an alternative text for your photo
  • hero: the path to your photo. We recommend to put it in the images folder.

For example:

"properties": {
    "name": "Daniel Castillo",
    "description": "Frontend web developer",
    "alt": "Photo of Daniel Castillo",
    "hero": "./src/images/daniel-castillo.png"
},

Social media section

The Social Media section is going to have all your social media links. You can modify it in the Social array which has one object per social media. You only need to put your social media link in the link property within the corresponding object.

For example:

"Social": [
    {
        "label": "Email",
        "value": "bx-envelope",
        "link": "mailto:[email protected]"
    },
    { "label": "Link", "value": "bx-link", "link": "https://dlcastillop.com" },
    {
        "label": "GitHub",
        "value": "bxl-github",
        "link": "https://github.com/dlcastillop"
    },
    {
        "label": "Twitter",
        "value": "bxl-twitter",
        "link": "https://twitter.com/dlcastillop"
    },
    {
        "label": "LinkedIn",
        "value": "bxl-linkedin",
        "link": "https://linkedin.com/in/dlcastillop"
    },
    {
        "label": "Instagram",
        "value": "bxl-instagram",
        "link": "https://instagram.com/dlcastillop"
    },
    { "label": "Discord", "value": "bxl-discord", "link": "" },
    { "label": "Facebook", "value": "bxl-facebook", "link": "" },
    { "label": "Medium", "value": "bxl-medium", "link": "" },
    { "label": "Pinterest", "value": "bxl-pinterest", "link": "" },
    { "label": "Snapchat", "value": "bxl-snapchat", "link": "" },
    { "label": "Telegram", "value": "bxl-telegram", "link": "" },
    { "label": "TikTok", "value": "bxl-tiktok", "link": "" },
    { "label": "Twitch", "value": "bxl-twitch", "link": "" },
    { "label": "Vimeo", "value": "bxl-vimeo", "link": "" },
    { "label": "WhatsApp", "value": "bxl-whatsapp", "link": "" },
    { "label": "YouTube", "value": "bxl-youtube", "link": "" },
    { "label": "Product Hunt", "value": "bxl-product-hunt", "link": "" },
    { "label": "Newsletter", "value": "bx-mail-send", "link": "" }
],

If you want to modify the order of the social media, you must organize the objects according to your preference.

For example:

"Social": [
    { "label": "LinkedIn", "value": "bxl-linkedin", "link": "https://linkedin.com/in/dlcastillop" },
    { "label": "Twitter", "value": "bxl-twitter", "link": "https://twitter.com/dlcastillop" },
    { "label": "Link", "value": "bx-link", "link": "https://dlcastillop.com" },
    { "label": "Instagram", "value": "bxl-instagram", "link": "https://instagram.com/dlcastillop" },
    { "label": "Email", "value": "bx-envelope", "link": "mailto:[email protected]" },
    { "label": "GitHub", "value": "bxl-github", "link": "https://github.com/dlcastillop" },
    { "label": "Discord", "value": "bxl-discord", "link": "" },
    { "label": "Facebook", "value": "bxl-facebook", "link": "" },
    { "label": "Medium", "value": "bxl-medium", "link": "" },
    { "label": "Pinterest", "value": "bxl-pinterest", "link": "" },
    { "label": "Snapchat", "value": "bxl-snapchat", "link": "" },
    { "label": "Telegram", "value": "bxl-telegram", "link": "" },
    { "label": "TikTok", "value": "bxl-tiktok", "link": "" },
    { "label": "Twitch", "value": "bxl-twitch", "link": "" },
    { "label": "Vimeo", "value": "bxl-vimeo", "link": "" },
    { "label": "WhatsApp", "value": "bxl-whatsapp", "link": "" },
    { "label": "YouTube", "value": "bxl-youtube", "link": "" },
    { "label": "Product Hunt", "value": "bxl-product-hunt", "link": "" },
    { "label": "Newsletter", "value": "bx-mail-send", "link": "" }
],

The Social Media section supports:

  • Twitter
  • GitHub
  • LinkedIn
  • Instagram
  • A link
  • Discord
  • Facebook
  • Medium
  • Pinterest
  • Snapchat
  • Telegram
  • TikTok
  • Twitch
  • Vimeo
  • WhatsApp
  • YouTube
  • Product Hunt
  • A newsletter

Payment section

The Payment section is going to have all your payment methods. You can modify it in the Payments array which has one object per payment methods. You only need to put your payment method link in the value property within the corresponding object.

For example:

"Payments": [
    {
        "id": "btc",
        "label": "Bitcoin",
        "value": "bc1qejahgjmqnmyrw7jvn0d7evfdq6ssjl3wq7hfle",
        "img": "./src/images/payments/btc.svg"
    },
    {
        "id": "busd",
        "label": "BinanceUSD",
        "value": "",
        "img": "./src/images/payments/busd.svg"
        },
    {
        "id": "matic",
        "label": "Matic",
        "value": "",
        "img": "./src/images/payments/matic.svg"
    },
    {
        "id": "doge",
        "label": "DogeCoin",
        "value": "",
        "img": "./src/images/payments/doge.svg"
    },
    {
        "id": "eth",
        "label": "Ethereum",
        "value": "0x59C864f658caD68A19a97499755080c056079988",
        "img": "./src/images/payments/eth.svg"
    },
    {
        "id": "ltc",
        "label": "Litecoin",
        "value": "",
        "img": "./src/images/payments/ltc.svg"
    },
    {
        "id": "paypal",
        "label": "Paypal",
        "value": "",
        "img": "./src/images/payments/paypal.svg"
    },
    {
        "id": "usdt",
        "label": "USDT",
        "value": "",
        "img": "./src/images/payments/usdt.svg"
    },
    {
        "id": "qvapay",
        "label": "QvaPay",
        "value": "https://qvapay.com/payme/dlcastillop",
        "img": "./src/images/payments/qvapay.svg"
    },
    {
        "id": "sol",
        "label": "Solana",
        "value": "",
        "img": "./src/images/payments/sol.svg"
    },
    {
        "id": "ada",
        "label": "ADA",
        "value": "",
        "img": "./src/images/payments/ada.svg"
    },
    {
        "id": "trx",
        "label": "Tron",
        "value": "",
        "img": "./src/images/payments/trx.svg"
    },
    {
        "id": "xrp",
        "label": "XRP",
        "value": "",
        "img": "./src/images/payments/xrp.svg"
    },
    {
        "id": "card",
        "label": "Card",
        "value": "",
        "img": "./images/payments/card.svg"
    }
]

If you want to modify the order of the payment methods, you must organize the objects according to your preference.

For example:

"Payments": [
    {
        "id": "qvapay",
        "label": "QvaPay",
        "value": "https://qvapay.com/payme/dlcastillop",
        "img": "./src/images/payments/qvapay.svg"
    },
    {
        "id": "eth",
        "label": "Ethereum",
        "value": "0x59C864f658caD68A19a97499755080c056079988",
        "img": "./src/images/payments/eth.svg"
    },
    {
        "id": "btc",
        "label": "Bitcoin",
        "value": "bc1qejahgjmqnmyrw7jvn0d7evfdq6ssjl3wq7hfle",
        "img": "./src/images/payments/btc.svg"
    },
    {
        "id": "busd",
        "label": "BinanceUSD",
        "value": "",
        "img": "./src/images/payments/busd.svg"
    },
    {
        "id": "matic",
        "label": "Matic",
        "value": "",
        "img": "./src/images/payments/matic.svg"
    },
    {
        "id": "doge",
        "label": "DogeCoin",
        "value": "",
        "img": "./src/images/payments/doge.svg"
    },
    {
        "id": "ltc",
        "label": "Litecoin",
        "value": "",
        "img": "./src/images/payments/ltc.svg"
    },
    {
        "id": "paypal",
        "label": "Paypal",
        "value": "",
        "img": "./src/images/payments/paypal.svg"
    },
    {
        "id": "usdt",
        "label": "USDT",
        "value": "",
        "img": "./src/images/payments/usdt.svg"
    },
    {
        "id": "sol",
        "label": "Solana",
        "value": "",
        "img": "./src/images/payments/sol.svg"
    },
    {
        "id": "ada",
        "label": "ADA",
        "value": "",
        "img": "./src/images/payments/ada.svg"
    },
    {
        "id": "trx",
        "label": "Tron",
        "value": "",
        "img": "./src/images/payments/trx.svg"
    },
    {
        "id": "xrp",
        "label": "XRP",
        "value": "",
        "img": "./src/images/payments/xrp.svg"
    },
    {
        "id": "card",
        "label": "Card",
        "value": "",
        "img": "./images/payments/card.svg"
    }
]

The Payment section supports:

  • Bitcoin
  • Binance USD
  • Matic
  • DogeCoin
  • Ethereum
  • Litecoin
  • PayPal
  • USDT
  • QvaPay
  • Solana
  • ADA
  • TRON
  • XRP
  • A card

Theme

You can add your Google Analytics ID in the googleAnalyticsId property.

For example:

"googleAnalyticsId": "G-SOMEID"

How to deploy

Deploy on GitHub Pages

  1. Go to the repository settings, enable GitHub Pages and, select the GitHub Actions option as the source. For more info visit this link
  2. Go to the vite.config.js and uncomment the base parameter. For more info read the comment in vite.config.js
  3. After some seconds the deployment will be ready in https://<username>.github.io/paylink

Contributions

If you're interested in contributing to PayLink, please read our contributing docs before submitting a pull request.

Support

Don't forget to leave a star!

Special thanks

Many thanks to Manuel Ernesto, Yoannis Sánchez, Carlos Z. Bent and Alex Navarro. PayLink is much better thanks to your work.

paylink's People

Contributors

carloszbent avatar dlcastillop avatar leynier avatar manuelernestog avatar yossthedev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.