Ready to use components for credits and payment flow

Unlocking the Power of UserCredits: Making Payments a Breeze for Small Startups

So, you have a brilliant startup idea. You're all set to create the next big thing, but there's a catch: you need to handle payments and credit management. That's where UserCredits comes to the rescue.

Please note that this is still work in progress, but I wrote this article because I'm eager to talk to people who would like to contribute both on user-credits and user-credits-ui

The Birth of UserCredits

It all started when I was building my project, CvLink.in, an AI resume-building platform. I needed a payment system with credit management, but I couldn't find a library tailored to the needs of small startups like mine. So, I took matters into my own hands.

A Solution for the Uncharted Territory

UserCredits is not your run-of-the-mill payment library. It's a versatile, technology-agnostic solution designed to adapt to any front-end framework, making it accessible to developers of all backgrounds. It provides the building blocks for handling payments, offers, and user credits with ease and flexibility.

Unveiling User-Credits-UI: Where the Magic Happens

Now, let's talk about user-credits-ui, the enchanting front-end layer of UserCredits. This part of the library brings a touch of magic to your project, and I promise, it's more fun than reading an academic paper.

Imagine you have an array of offers and you want to display them in a visually appealing way. With user-credits-ui, it's as easy as waving a magic wand. Let's take a look at how we can represent prices using Svelte, but remember, it's adaptable to any front-end technology.

// +layout.svelte
// Set up your resolver and element builder

import { OfferImpl } from '../lib/example/impl/model/OfferImpl';
import Pricing from '../lib/components/Pricing.svelte';

// Mocking values that normally come from the user-credits lib
const freeOffer = new OfferImpl("000", "free", 0, 0);
const startupOffer = new OfferImpl("001", "startup", 0, 1);
const scaleupOffer = new OfferImpl("002", "scaleup", 0, 0);
const enterpriseOffer = new OfferImpl("003", "enterprise", 0, 0);

<Pricing offerList={[freeOffer, startupOffer, scaleupOffer, enterpriseOffer]} />

Pricing is a provided template that creates <Offer> objects. These objects use the resolver to determine how to represent the offers. It uses templates from the very interesting preline project that is built on top of tailwindcss

The magic behind the scenes is the Resolver, an essential part of UserCredits. It transforms raw data into view specifications, ensuring your data is displayed exactly as you want it. Here's a sneak peek into the Resolver:

// Resolver class
export class Resolver implements IResourceResolver {
    getObject<T extends IGeneratorData<T>>(domain: IResourceDomain, data: object): T {
        // Implement your logic here: for example
        switch(domain.type) {
            case "Offer":
                return new OfferProps(data as unknown as IOffer<string>) as T;
        }

    }
}

Now, meet OfferProps. It takes each offer, identifies it, and completes its data. Here's how it works:

// OfferProps class
export class OfferProps implements IOfferProps {
    constructor(data: IOffer<string>) {
        const name = data.name;
// a static switch case could do the trick
        switch (name) {
            case 'free':
                this.name = new ValuePresentation(name);
                // you can add css or tailwind css for example
                this.description = new ValuePresentation('Forever free', 'text-red-500 font-bold', false);
                this.price = new ValuePresentation('Free');
                // and so on for other cases
        }
    }
}

ValuePresentation has a constructor with optional parameters for customizing CSS, providing additional flexibility. The getObject method in the Resolver is an opportunity to enrich the view with elements specific to your platform or add data not available in the IOffer object coming from the UserCredits library.

With UserCredits and user-credits-ui (now for svelte), you can represent offers, payments, and user credits in a straightforward way that adapts to any front-end framework. It's like having your own magical toolkit for creating rich, dynamic views without breaking a sweat.

Whether you're building the next big startup or a passion project, UserCredits has your back. It's time to embrace the magic and make payments a breeze for your small startup.

To learn more about UserCredits and explore the possibilities, check out the UserCredits GitHub repository. And its view layer svelte-user-credits that will be moved to user-credits-ui