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.

Web SDK - Previous

Checkout SDK

Remove a plan

Last modified 11mo ago

Copy link