Ready to use components for credits and payment flow
Tags: billing, payment, startup, lib
Published: 2023-10-25 14:26:47

# 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](https://github.com/ziedHamdi/UserCredits) and [user-credits-ui](https://github.com/ziedHamdi/svelte-user-credits)

## The Birth of UserCredits

*It all started when I was building my project, [CvLink.in](https://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.*


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1sq694mqp9if258akvp.jpg)

## 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.

```javascript
// +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](https://preline.co/examples/pricing-sections.html) project that is built on top of [tailwindcss](https://tailwindcss.com/)*

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`:

```javascript
// 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:

```javascript
// 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](https://github.com/ziedHamdi/UserCredits) library.

With UserCredits and [user-credits-ui](https://github.com/ziedHamdi/user-credits-ui) (now [for svelte](https://github.com/ziedHamdi/svelte-user-credits)), 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](https://github.com/ziedHamdi/UserCredits). And its view layer [svelte-user-credits](https://github.com/ziedHamdi/svelte-user-credits) that will be moved to [user-credits-ui](https://github.com/ziedHamdi/user-credits-ui)*