Drawer and checkout

The drawer

NativeSlide.open();
NativeSlide.close();
NativeSlide.toggle();
NativeSlide.isOpen(); // true or false

open(), close() and toggle() return nothing. They do nothing until the API is ready, or when NativeSlide.enabled is false. Opening a drawer that’s already open, or closing a closed one, does nothing either. To know when the drawer opens or closes, whoever did it, listen for the open and close events.

NativeSlide.variant is the ID of the cart the shopper sees, or null until the API is ready. It only matters if the merchant runs an A/B test between carts, for example to tag your own analytics events.

Checkout

NativeSlide.checkout(params) sends the shopper to Shopify’s checkout. It keeps the shopper’s market, so a shopper browsing /fr/ goes to /fr/checkout. params is optional. Its values are strings and go into the address, so { payment: 'shop_pay' } goes straight to Shop Pay.

const result = NativeSlide.checkout({ payment: 'shop_pay' });
if (!result.ok) console.warn(result.error.code);

Unlike the cart actions, checkout() doesn’t return a promise. It returns { ok, cart, error } straight away:

• ok: true when the shopper is on the way to checkout.
• cancelled when a before-checkout listener stopped it. The shopper stays on the page.
• disabled when the API isn’t ready yet, or the store has no published NativeSlide cart.

checkout() doesn’t check the checkout block’s Terms checkbox and Age confirmation checkbox. Those only apply to the drawer’s own checkout buttons.

Stopping checkout

Just before checkout, whether it starts from your script or from a button in the drawer, the before-checkout event fires. Cancel it to keep the shopper in the cart. This is how you’d ask for a delivery date first:

NativeSlide.on('before-checkout', ({ cart }, event) => {
  if (!cart?.attributes['Delivery date']) {
    event.preventDefault();
    showDeliveryDatePicker();
  }
});

Once the shopper has picked a date, save it with Cart.setAttributes() and call NativeSlide.checkout() again:

await NativeSlide.Cart.setAttributes({ 'Delivery date': pickedDate });
NativeSlide.checkout();

If checkout isn’t stopped, the checkout event fires and the browser goes to checkout.