​
createPurchaseButton

<div id="supertab-button-container"></div>

const supertabClient = new Supertab({ clientId: "test_client.abc" });

const { destroy, initialState } = await supertabClient.createPurchaseButton({
  containerElement: document.getElementById("supertab-button-container"),
  experienceId: "experience.abc",
});

​
Parameters

createPurchaseButton accepts the object with following properties:
​
containerElement
Element
required
Container element to render purchase button in. Elements are appended to the container, so original contents are not replaced.
​
experienceId
string
required
ID of the purchase button experience created in Business Portal.
​
purchaseMetadata
object
Key-value pairs of custom information associated with the purchase.
​
onDone
function
Callback function called when user leaves the purchase flow either as a result of successful purchase or cancellation.Returns a promise which resolves with the purchase button summary. See Purchase button summary for more details.

​
Return value

A promise which resolves with an object with following properties:
​
destroy
function
Destroy Supertab button instance. This removes all nodes related to Supertab button from DOM.
​
initialState
object
Initial state of the purchase button. See Purchase button summary for more details.

​
Purchase button summary

Both the returned initialState object and the object passed as an argument to the onDone callback contain the following properties:
​
priorEntitlement
EntitlementStatus | null
Any prior entitlement of the current user. null if user has no prior entitlement.
​
authStatus
AuthStatus
Current authentication status of the user. Possible values: missing, expired, valid.
​
purchase
Purchase | null
Purchase object if launching the flow resulted in a purchase. null otherwise.
​
purchasedOffering
Offering | null
Offering object if user has purchased an offering. null otherwise.
​
tab
Tab
The users tab
​
paymentResult
boolean
If a purchase required payment, this will be true if payment was successful. false otherwise.

​
Example

Example
const { destroy, initialState } = await supertabClient.createPurchaseButton({
  containerElement: document.getElementById("supertab-button-container"),
  experienceId: "experience.abc",
  onDone: ({ priorEntitlement, purchase }) => {
    if (priorEntitlement) {
      // User has prior entitlement to the content.
      return;
    }

    if (purchase) {
      if (purchase.status === "completed") {
        // Purchase was completed successfully.
      } else {
        // Purchase was not completed. User may have
        // canceled the payment dialog if purchase
        // required payment.
      }
    } else {
      // User has canceled the flow and did not
      // attempt to purchase the offering.
    }
  }