Tapcart App Studio

Example Usage

// App.js

import { TapcartProvider,createClient } from "@tapcart/app-studio-sdk";
import InnerComponent from "./InnerComponent";

function App() {

  const tapcartClient = createClient({test: false});

  return (
    <div className="App">
      <WebbridgeProvider webbridgeClient={webbridgeClient}>
        <TapcartBlock /> {/* this is your apps main entry point*/}
      </WebbridgeProvider>
    </div>

  );
}

export default App;

// InnerComponent.js

import { useActions } from "@tapcart/app-studio-sdk";

function InnerComponent(props) {
    let { openProduct, openCollection, openCart } = useActions();
    return <button onClick={() => openProduct("1232242232132")}>Inner Component</button>
}

export default InnerComponent;

Docs

To see the public facing documentation : https://docs.tapcart.com/docs/app-actions

The SDK acts as a communication bridge between the native iOS/Android Webviews and the Web Apps built by the merchants. This two way communication is powered by events and actions.

Actions allow the SDK users to interact with native app functionality via JS. The following actions are supported currently:

Tapcart.actions.addToCart(...)
Tapcart.actions.applyDiscount(...)
Tapcart.actions.applyGiftCard(...)
Tapcart.actions.cartBuyerIdentity(...)
Tapcart.actions.cartUpdateDeliveryOptions(...)
Tapcart.actions.getCustomerIdentity()
Tapcart.actions.openCart()
Tapcart.actions.openCollection(...)
Tapcart.actions.openProduct(...)
Tapcart.actions.openScreen(...)
Tapcart.actions.removeFromCart(...)
Tapcart.actions.renderView()
Tapcart.actions.scrollToBlockBottom()
Tapcart.actions.scrollToBlockTop()
Tapcart.actions.showToast(...)
Tapcart.actions.updateCartAttributes(...)
Tapcart.actions.updateCartNote(...)
Tapcart.actions.updateView(...)
Tapcart.actions.vault.initialize(...)

Events allow SDK users to respond to changes in the native apps; The following events are supported currently:

• cart/updated
• discount/applied
• giftcard/applied
• product/opened
• collection/opened