@getanchor/getanchor-checkout-sdk v1.0.58

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/getanchor-checkout-sdk

using yarn

yarn add @getanchor/getanchor-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/getanchor-checkout-sdk";

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

const formData = {
  reference: "000031",
  amount: 10000,
  currency: "NGN",
  key: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
  customer: {
    firstName: "Test",
    lastName: "checkout",
    email: "test.checkout@gmail.com",
    phoneNumber: "070******27",
  },
  paymentMethods: ["CARD", "TRANSFER"],
};

const anchorSdk = AnchorSDK({
  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;
      case AnchorWidgetEvents.PAYMENT_SUCCESS:
        console.log("Payment successful", data);
        break;
    }
  },
});

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

with React

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

const App = () => {
  const formData: InitializePayment = {
    reference: "000031",
    amount: 10000,
    currency: Currencies.NGN,
    key: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
    customer: {
      firstName: "Test",
      lastName: "checkout",
      email: "test.checkout@gmail.com",
      phoneNumber: "070******27",
    },
    paymentMethods: [PaymentMethods.CARD, PaymentMethods.TRANSFER],
  };

  const openWidget = useCallback(() => {
    const anchorSdk = AnchorSDK({
      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;
          case AnchorWidgetEvents.PAYMENT_SUCCESS:
            console.log("Payment successful", data);
            break;
        }
      },
    });

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

  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,
  Currencies,
  InitializePayment,
  PaymentMethods,
} from "@getanchor/getanchor-checkout-sdk";

const formData: InitializePayment = {
  reference: "000031",
  amount: 10000,
  currency: Currencies.NGN,
  key: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
  customer: {
    firstName: "Test",
    lastName: "checkout",
    email: "test.checkout@gmail.com",
    phoneNumber: "070******27",
  },
  paymentMethods: [PaymentMethods.CARD, PaymentMethods.TRANSFER],
};

const openWidget = () => {
  const anchorSdk = AnchorSDK({
    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;
        case AnchorWidgetEvents.PAYMENT_SUCCESS:
          console.log("Payment successful", data);
          break;
      }
    },
  });

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

with Angular

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  formData: InitializePayment = {
    reference: "000031",
    amount: 10000,
    currency: Currencies.NGN,
    key: "pk_test_6d7f7b7d-4b61-4b7b-8b7d-7b7d7b7d7b7d",
    customer: {
      firstName: "Test",
      lastName: "checkout",
      email: "test.checkout@gmail.com",
      phoneNumber: "070******27",
    },
    paymentMethods: [PaymentMethods.CARD, PaymentMethods.TRANSFER],
  };

  openWidget() {
    const anchorSdk = AnchorSDK({
      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;
          case AnchorWidgetEvents.PAYMENT_SUCCESS:
            console.log("Payment successful", data);
            break;
        }
      },
    });

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