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.tsxconst ExamplePage = () => (<PlanButton sku="scale">Choose the Scale plan</PlanButton>);​​// plan-button.component.tsxclass 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.tsxdeclare 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.