Add a plan

You can add one or more plans to the cart and open the checkout afterwards:
abowire.cart.addItem({ sku: 'scale' });
abowire.cart.openCart();
You can execute these methods from anywhere in your application, for instance a button in plan JS:
<button class="plan-button" data-plan="premium">Choose the Premium plan</button>
<button class="plan-button" data-plan="scale">Choose the Scale plan</button>
<button class="plan-button" data-plan="enterprise">Choose the Enterprise plan</button>
    
<script>
const buttons = document.getElementsByClassName("plan-button");
​
for(let button of buttons) {
  const sku = button.getAttribute("data-plan");
​
  button.addEventListener("click", () => {
    abowire.cart.addItem({ sku });
    abowire.cart.openCart();
  });
}
</script>
Although we don't offer a React wrapper at this time, you can use our SDK in React as well:
// example.page.tsx
const ExamplePage = () => (
  <PlanButton sku="scale">Choose the Scale plan</PlanButton>
);
​
​
// plan-button.component.tsx
class PlanButton extends React.Component<PlanButtonProps> {
  selectPlan() {
    abowire.cart.addItem({ sku: this.props.sku });
    abowire.cart.openCart();
  } 
  
  render() {
    return <button onClick={this.selectPlan}>{this.props.children}</button>
  }
}
​
​
// plan-button.types.tsx
declare var abowire: any;
​
interface PlanButtonProps {
  sku: string;
  children: any; 
}
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 updated 3 months ago