kakapay-js-sdk v0.0.39

Kakapay-js-sdk

Simple library for show a custom payment button in any website

Api document: Api Document

Installation

NPM

npm install --save kakapay-js-sdk

CDN

<script src="https://cdn.kakapay.io/sdk/kakapay/kakapay-v1.min.js"></script>
<script>
  console.log(typeof Kakapay); // 'function'
</script>

Quick Start

<!-- Render button placeholder -->
<div id="light-theme-popup"></div>
<form id="form">
  <input type="hidden" name="amount" value="{amount}" />
  <input type="hidden" name="out_trade_no" value="{out_trade_no}" />
  <input type="hidden" name="return_url" value="{return_url}" />
  <input type="hidden" name="notify_url" value="{notify_url}" />
  <input type="hidden" name="title" value="{title}" />
  <input type="hidden" name="description" value="{description}" />
  <input type="hidden" name="currency" value="BRL" />
</form>

import Kakapay from "kakapay-js-sdk";
const appId = "{app_id}";
const appPublishKey = "{app_publish_key}";
const env = "sandbox";
new Kakapay({ appId, appPublishKey, env } as IKakapayParams).render("#light-theme-popup" as string, {
  formSelector: "#form", // Submitted data form
  theme: "light", // light or dark
} as IRenderOptions);

Interface

type IKakapayParams = {
  appId: string;
  appPublishKey: string;
  env?: "sandbox" | "production";
  onModalShow?: () => void;
  onOrderComplete?: () => void;
};

type IRenderOptions = {
  formSelector?: string;
  theme?: "dark" | "light";
};

API

It's easy to use Kakapay-js-sdk to create payin order.

Constructor

Use appId,appPublishKey to initialize the context

constructor Kakapay(props: IKakapayParams): Kakapay

const kakapay = new Kakapay({
  appId,
  appPublishKey,
  env,
  onModalShow,
  onOrderComplete,
});
console.log(kakapay);

render

(property) Kakapay.render: (selector: string, { formSelector, theme }: IRenderOptions) => void

kakapay.render("#light-theme-popup", {
  formSelector: "#form", // Submitted data form
  theme: "light", // Popup theme style
});

Simple web demo

Sandbox

Online demo

Production

Online demo

Others

Preflight

// Important: The SDK will perform preflight preconnection optimization. If you directly use api docking, it is recommended to add preconnection to optimize Payin efficiency
fetch("https://gateway.kakapay.io/api/v1/payin", {
  method: "OPTIONS",
});

Webpack 5 +

Waring: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

  // webpack.config.js
  {
    ...
    resolve: {
      fallback: {
        ...
        "crypto": false,
        ...
      }
    }
    ...
  }

Authors

This library is created by the team of Kakapay

License

The MIT License.