Abowire
Search…
Add a plan
You can add one or more plans to the cart and open the checkout afterwards:
1
abowire.cart.addItem({ sku: 'scale' });
2
abowire.cart.openCart();
Copied!
You can execute these methods from anywhere in your application, for instance a button in plan JS:
1
<button class="plan-button" data-plan="premium">Choose the Premium plan</button>
2
<button class="plan-button" data-plan="scale">Choose the Scale plan</button>
3
<button class="plan-button" data-plan="enterprise">Choose the Enterprise plan</button>
4
5
<script>
6
const buttons = document.getElementsByClassName("plan-button");
7
8
for(let button of buttons) {
9
const sku = button.getAttribute("data-plan");
10
11
button.addEventListener("click", () => {
12
abowire.cart.addItem({ sku });
13
abowire.cart.openCart();
14
});
15
}
16
</script>
Copied!
Although we don't offer a React wrapper at this time, you can use our SDK in React as well:
1
// example.page.tsx
2
const ExamplePage = () => (
3
<PlanButton sku="scale">Choose the Scale plan</PlanButton>
4
);
5
6
7
// plan-button.component.tsx
8
class PlanButton extends React.Component<PlanButtonProps> {
9
selectPlan() {
10
abowire.cart.addItem({ sku: this.props.sku });
11
abowire.cart.openCart();
12
}
13
14
render() {
15
return <button onClick={this.selectPlan}>{this.props.children}</button>
16
}
17
}
18
19
20
// plan-button.types.tsx
21
declare var abowire: any;
22
23
interface PlanButtonProps {
24
sku: string;
25
children: any;
26
}
Copied!
Please note that you need to call the
openCart() method for the cart modal to show. You can also call closeCart() to close it as well.Last modified 1yr ago
Copy link