How to assign badge on button click.

I have a dynamic item page for each member on my site.
I need a way to assign/remove a badge when a button is clicked.

I found this on the wix code, can anybody help me?

https://www.wix.com/corvid/reference/wix-users-backend.badges.html

Hey I implemented adding and removing badges via button click, I made this video explaining it but will also leave the code below:

Wix Page Code (client side)

import wixUser from 'wix-users';
import { assignBadge, removeBadge } from 'backend/badges';

let user = wixUser.currentUser;
let userID;

// Check to make sure currentUser is logged in
if (user.loggedIn) {
    console.log(user);
    userID = user.id;
}

// On button click call the assignBadge method from the backend
export function assignBtn_click(event) {
    assignBadge('9ac91ce3-73aa-4fc6-8c4b-08e23cfc2f2e', [userID])
    .then( () => {
        console.log('added');
    })
}

// on remove button click call the removeBadge method from backend
export function removeBtn_click(event) {
    removeBadge('9ac91ce3-73aa-4fc6-8c4b-08e23cfc2f2e', [userID])
    .then( () => {
        console.log('removed');
    })
}

Backend .jsw code:

import { badges } from 'wix-users-backend'

// takes a badge id and an array/list of user ids to assign to that badge
export function assignBadge(badgeID, userIDs) {
 return badges.assignMembers(badgeID, userIDs);
}

//remove a badge from a list of users
export function removeBadge(badgeID, userIDs) {
 return badges.removeMembers(badgeID, userIDs);
}

Hope this helps :+1:

Best,
Dom

Thanks a lot @djvacchiano for this best practice, just one more details: is there a way I can implement both badges based on pricing plans?