sdewjdsjksdk v1.0.28

Getting Started

Getanchor checkout SDK is a JavaScript library that allows you to integrate Getanchor checkout into your webapps

Installation

using npm

npm install @getanchor-co/checkout-sdk

Note

• This package is only intended for use in the browser.
• This package is not intended for use in a Node.js environment.

Usage

with Vanilla JavaScript

import AnchorSDK, { AnchorWidgetEvents } from "@getanchor-co/checkout-sdk";

const paymentButton = document.getElementById("payment-button");

const anchorSdk = AnchorSDK({
  publicKey: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
  onEvent: (event, data) => {
    switch (event) {
      case AnchorWidgetEvents.WIDGET_OPENED:
        console.log("Widget opened", data);
        break;
      case AnchorWidgetEvents.WIDGET_CLOSED:
        console.log("Widget closed", data);
        break;
      case AnchorWidgetEvents.WIDGET_LOAD_ERROR:
        console.log("Widget load error", data);
        break;
      case AnchorWidgetEvents.WIDGET_LOADED:
        console.log("Widget loaded", data);
        break;
    }
  },
  meta: {
    order_ref: "order_ref",
    custom: "custom",
  },
});

paymentButton.addEventListener("click", () => {
  anchorSdk.setup();
  anchorSdk.open();
});

with React

import React, { useCallback } from "react";
import AnchorSDK, { AnchorWidgetEvents } from "@getanchor-co/checkout-sdk";

const App = () => {
  const openWidget = useCallback(() => {
    const anchorSdk = AnchorSDK({
      publicKey: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
      onEvent: (event, data) => {
        switch (event) {
          case AnchorWidgetEvents.WIDGET_OPENED:
            console.log("Widget opened", data);
            break;
          case AnchorWidgetEvents.WIDGET_CLOSED:
            console.log("Widget closed", data);
            break;
          case AnchorWidgetEvents.WIDGET_LOAD_ERROR:
            console.log("Widget load error", data);
            break;
          case AnchorWidgetEvents.WIDGET_LOADED:
            console.log("Widget loaded", data);
            break;
        }
      },
      meta: {
        order_ref: "order_ref",
        custom: "custom",
      },
    });

    anchorSdk.setup();
    anchorSdk.open();
  }, []);

  return (
    <div>
      <button onClick={openWidget}>Pay Now</button>
    </div>
  );
};

export default App;

with Vue

<template>
  <div>
    <button @click="openWidget">Pay Now</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AnchorSDK, { AnchorWidgetEvents } from "@getanchor-co/checkout-sdk";

const openWidget = () => {
  const anchorSdk = AnchorSDK({
    publicKey: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
    onEvent: (event, data) => {
      switch (event) {
        case AnchorWidgetEvents.WIDGET_OPENED:
          console.log("Widget opened", data);
          break;
        case AnchorWidgetEvents.WIDGET_CLOSED:
          console.log("Widget closed", data);
          break;
        case AnchorWidgetEvents.WIDGET_LOAD_ERROR:
          console.log("Widget load error", data);
          break;
        case AnchorWidgetEvents.WIDGET_LOADED:
          console.log("Widget loaded", data);
          break;
      }
    },
    meta: {
      order_ref: "order_ref",
      custom: "custom",
    },
  });

  anchorSdk.setup();
  anchorSdk.open();
};
</script>

with Angular

import { Component } from "@angular/core";
import AnchorSDK, { AnchorWidgetEvents } from "@getanchor-co/checkout-sdk";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  openWidget() {
    const anchorSdk = AnchorSDK({
      publicKey: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
      onEvent: (event, data) => {
        switch (event) {
          case AnchorWidgetEvents.WIDGET_OPENED:
            console.log("Widget opened", data);
            break;
          case AnchorWidgetEvents.WIDGET_CLOSED:
            console.log("Widget closed", data);
            break;
          case AnchorWidgetEvents.WIDGET_LOAD_ERROR:
            console.log("Widget load error", data);
            break;
          case AnchorWidgetEvents.WIDGET_LOADED:
            console.log("Widget loaded", data);
            break;
        }
      },
      meta: {
        order_ref: "order_ref",
        custom: "custom",
      },
    });

    anchorSdk.setup();
    anchorSdk.open();
  }
}