fidia-payment-widget

Fidia Payment Widget

Fidia payment widget embeds a Fidia payment link and product and booking. on your website. This widget allows you specify a trigger button which when clicked pops up Fidia’s payment link/product/booking and allows you receive support from your fans/audience without them having to leave your website.

To give you a feel of how this works, we created a demo website that uses our widget. You only have to click the embedded Fidia button to see it in action. Check it out for products, pay links, and bookings.

🚀 Usage

HTML

Embedding a Fidia payment link/product or booking on your website is super simple. First, you need to import our embed script. Add the below snippet to anywhere within your html code.

Payment Link

<script src="https://embed.getfidia.com/js/payment-embed.js" async></script>

Product

<script src="https://embed.getfidia.com/js/product-embed.js" async></script>

Booking

<script src="https://embed.getfidia.com/js/booking-embed.js" async></script>

Specify a button which when clicked would popup our widget. This button can be placed anywhere within the body tag and has to have the following attributes:

• class - fidia-embed-target for payment link, fidia-product-embed-target for product, and fidia-booking-embed for booking
• data-fidia-username - Your Fidia username
• data-fidia-slug - The slug of the payment link/product/booking you want to embed

Payment Link additional attributes

• data-fidia-button - Button Label [Options are: “Pay Me”, “Donate”, “Book Me”, “Support Me”] (defaults to “Support Me” if none is specified)
• fidia-button-color - button color (defaults if none is specified)
• fidia-button-background - button background (defaults if none is specified)

This will look as shown below:

<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>

You can add as many buttons as desired and each of them will be replaced by Fidia’s custom button.

Vue

Add the below script to your mounted hook. Replace embedUrl with the url of the embed script you want to use.

mounted(){
    const fidiaScript = document.createElement('script');
    fidiaScript.async = true;
    fidiaScript.setAttribute('src', embedUrl);
    document.getElementsByTagName("head")[0].appendChild(fidiaScript);
}

Then add your button anywhere in your component or it’s child component.

<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>

Nuxt

In your plugins folder, create a file named fidia-widget.js. Copy and paste the below code into this file.

export default () => { 
    (function() {
        const fidiaScript = document.createElement('script');
        fidiaScript.async = true;
        fidiaScript.setAttribute('src', embedUrl)
        document.getElementsByTagName("head")[0].appendChild(fidiaScript);
    })();
};

In your nuxt.config.js file, import this plugin as shown below.

plugins: [
    { src: '~/plugins/fidia-widget', mode: 'client' },
],

Now you can specify a target button anywhere within your layouts, pages, or components.

<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>

✨ Contribution

This widget still needs a lot of customizations, improvements, and fixes. PRs and issues are definitely welcomed!

This site is open source. Improve this page.