How to add ChargeBee link to HTML element with JavaScript?

Question

I'm using Charge Bee Payment Gateaway on my website (who don't know what it is, it's a payment gateaway created from their website, I just insert the link into my website and the "Plan" can be bought from my website). Now I'm using Supsystic Pricing Tables Plugin and at the bottom I have a button which should lead to payment, but the plugin doesnt allow me to add HTML element inside the button so I can actually add it, and I think my only option is to somehow append the classes to already existing classes with javascript or jQuery.

This is the button from plugin:

<a class="ptsEditArea ptsInputShell dt-sc-button charge-bee" style="color: #fff !important;">GET STARTED</a>

And this are the data-cb-types that I need to append to this button code so it can open ChargeBee transcation:

data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly"

Now is there any way I can add this classes to the <a> link I shared above.

Note that on the plugin page I can add classes to the button but I can't add data-cb-type and data-cb-plan.

If anyone can help I would be much appricated. Best wishes!

Answer 1

You can use Element.setAttribute() to achieve this in JS.

var e = document.getElementsByClassName('charge-bee');
e.setAttribute('data-cb-type', 'checkout');
e.setAttribute('data-cb-plan-id', 'Pet_sitter_three_monthly');

Doing so would add data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly" to .charge-bee .

CodePen Example