Back to packageRELEASE DETAILS

1.0.7

npm

54pay-payments-sdk

A Javascript-based SDK for integrating payment methods via 54Pay.

Published3 Aug 2026

Direct dependencies56

Transitive dependenciesNot calculated

README

Current package documentation

54pay-payment-sdk

A JavaScript/TypeScript SDK for accepting payments via 54Pay. This release covers the Nigeria (NGN) checkout: Bank Transfer, OPay, PalmPay and Kuda.

Installation

npm install 54pay-payment-sdk
# or
yarn add 54pay-payment-sdk

react, react-dom and styled-components are peer dependencies — install them in your app if you haven't already:

npm install react react-dom styled-components

Usage

The SDK mounts the checkout into a DOM element you provide via its id.

ES module / bundler (React, Vite, Next.js, etc.)

import { FiftyFourPayPaymentSdk } from "54pay-payment-sdk";

FiftyFourPayPaymentSdk.setup({
  targetId: "checkout-container", // id of an element already in the DOM
  props: {
    userData: {
      amount: 1000,
      transactionRef: "ORDER_12345",
      merchantPublicKey: "PK-…",
      countryCode: "NGA",
      currencyCode: "NGN",
      transactionCurrency: "NGN",
      firstName: "Ada",
      lastName: "Obi",
      email: "ada@example.com",
      phoneNumber: "8160009000",
    },
    config: { environment: "live", theme: "light" },
    onSuccess: (transactionId) => console.log("paid", transactionId),
    onError: (error) => console.error("payment failed", error),
  },
});

<div id="checkout-container"></div>

Script tag (CDN / global)

<script src="https://cdn.jsdelivr.net/npm/54pay-payment-sdk/dist/index.iife.js"></script>
<div id="checkout-container"></div>
<script>
  window["54PaySdk"].setup({
    targetId: "checkout-container",
    props: {
      userData: {
        amount: 1000,
        transactionRef: "ORDER_12345",
        merchantPublicKey: "PK-…",
        countryCode: "NGA",
        currencyCode: "NGN",
        firstName: "Ada",
        lastName: "Obi",
        email: "ada@example.com",
        phoneNumber: "8160009000",
      },
      config: { environment: "live" },
      onSuccess: (transactionId) => console.log("paid", transactionId),
    },
  });
</script>

API

`FiftyFourPayPaymentSdk.setup({ targetId, props })`

Field	Type	Description
`targetId`	`string`	`id` of the DOM element to render the checkout into.
`props`	`PaygateCheckoutSdkProps`	Checkout configuration (see below).

`props`

Field	Type	Required	Description
`userData`	`MerchantDataProps`	yes	Transaction + customer details (see below).
`config`	`{ environment?,}`	no	`environment: "test" \| "live"` (default `test`), `theme: "light" \| "dark"`.
`onSuccess`	`(transactionId?: string) => void`	no	Called once when the payment completes.
`onError`	`(error?: unknown) => void`	no	Called once when the payment fails.

`userData` (`MerchantDataProps`)

Required

Field	Type	Notes
`amount`	`number`	Must be a positive number.
`transactionRef`	`string`	Your unique reference. Used as the recovery key.
`merchantPublicKey`	`string`	Your 54Pay public key, used for API auth.
country / currency	`string`	Provide at least one of `countryCode` (e.g. `"NGA"`), `currencyCode` (e.g. `"NGN"`) or `transactionCurrency` so the SDK can resolve the country profile.
`firstName`, `lastName`, `email`, `phoneNumber`	`string`	Customer details.

Common optional fields: merchantName, merchantReference, transactionDescription, redirectUrl, successUrl, errorUrl, cancelUrl, webhookUrl, customerAddress, customerCity, customerState, metadataOrderId, metadataProductInfo. See the exported MerchantDataProps type for the full list.

Environments

config.environment selects the backend:

"test" → 54Pay test environment
"live" → 54Pay production environment

If omitted, the SDK defaults to the test environment.

Supported regions

The region is resolved from userData.countryCode and/or userData.currencyCode / transactionCurrency.

Region	Country code	Currency	Payment methods
Nigeria	`NGA`	`NGN`	Bank Transfer (dynamic virtual account), OPay, PalmPay, Kuda
Ghana	`GHA`	`GHS`	Mobile Money
Cameroon	`CMR`	`XAF`	Mobile Money
Kenya	`KEN`	`KES`	Mobile Money
Gambia	`GMB`	`GMD`	Mobile Money

Because XAF is shared across the six-country CFA zone, Cameroon is resolved from countryCode — send "CMR" (or "CM") to get the Cameroon profile.

If you pass an unsupported country/currency, the checkout will not mount — instead onError is called with:

{ code: "UNSUPPORTED_REGION", message: "…" }

License

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 59

Native requirements

56 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
axios Environment { "local_name": "axios", "alias": false, "peer_metadata": null }	`^1.13.5`	runtime
moment Environment { "local_name": "moment", "alias": false, "peer_metadata": null }	`^2.30.1`	runtime
fontawesome Environment { "local_name": "fontawesome", "alias": false, "peer_metadata": null }	`^5.6.3`	runtime
react-icons Environment { "local_name": "react-icons", "alias": false, "peer_metadata": null }	`^5.5.0`	runtime
styled-system Environment { "local_name": "styled-system", "alias": false, "peer_metadata": null }	`^5.1.5`	runtime
card-validator Environment { "local_name": "card-validator", "alias": false, "peer_metadata": null }	`^10.0.3`	runtime
credit-card-type Environment { "local_name": "credit-card-type", "alias": false, "peer_metadata": null }	`^10.1.0`	runtime
react-router-dom Environment { "local_name": "react-router-dom", "alias": false, "peer_metadata": null }	`^7.5.3`	runtime
libphonenumber-js Environment { "local_name": "libphonenumber-js", "alias": false, "peer_metadata": null }	`^1.12.24`	runtime
@radix-ui/react-toast Environment { "local_name": "@radix-ui/react-toast", "alias": false, "peer_metadata": null }	`^1.2.15`	runtime
@fortawesome/fontawesome-free Environment { "local_name": "@fortawesome/fontawesome-free", "alias": false, "peer_metadata": null }	`^7.2.0`	runtime
@fortawesome/react-fontawesome Environment { "local_name": "@fortawesome/react-fontawesome", "alias": false, "peer_metadata": null }	`^3.2.0`	runtime
@fortawesome/fontawesome-svg-core Environment { "local_name": "@fortawesome/fontawesome-svg-core", "alias": false, "peer_metadata": null }	`^7.2.0`	runtime
@fortawesome/free-solid-svg-icons Environment { "local_name": "@fortawesome/free-solid-svg-icons", "alias": false, "peer_metadata": null }	`^7.2.0`	runtime
@fortawesome/free-brands-svg-icons Environment { "local_name": "@fortawesome/free-brands-svg-icons", "alias": false, "peer_metadata": null }	`^7.2.0`	runtime
@fortawesome/free-regular-svg-icons Environment { "local_name": "@fortawesome/free-regular-svg-icons", "alias": false, "peer_metadata": null }	`^7.2.0`	runtime
vite Environment { "local_name": "vite", "alias": false, "peer_metadata": null }	`^6.3.3`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^19.2.4`	development
rollup Environment { "local_name": "rollup", "alias": false, "peer_metadata": null }	`^4.59.0`	development
recharts Environment { "local_name": "recharts", "alias": false, "peer_metadata": null }	`^2.15.3`	development
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^19.2.4`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^5.9.3`	development
web-vitals Environment { "local_name": "web-vitals", "alias": false, "peer_metadata": null }	`^4.2.0`	development
@babel/core Environment { "local_name": "@babel/core", "alias": false, "peer_metadata": null }	`^7.29.0`	development
@types/jest Environment { "local_name": "@types/jest", "alias": false, "peer_metadata": null }	`^29.5.14`	development
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^16.18.126`	development
html2canvas Environment { "local_name": "html2canvas", "alias": false, "peer_metadata": null }	`^1.4.1`	development
@craco/craco Environment { "local_name": "@craco/craco", "alias": false, "peer_metadata": null }	`^7.1.0`	development
@svgr/rollup Environment { "local_name": "@svgr/rollup", "alias": false, "peer_metadata": null }	`^8.1.0`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^19.2.9`	development
react-scripts Environment { "local_name": "react-scripts", "alias": false, "peer_metadata": null }	`5.0.1`	development
react-chartjs-2 Environment { "local_name": "react-chartjs-2", "alias": false, "peer_metadata": null }	`^5.3.0`	development
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^19.2.3`	development
@babel/preset-env Environment { "local_name": "@babel/preset-env", "alias": false, "peer_metadata": null }	`^7.29.0`	development
rollup-plugin-dts Environment { "local_name": "rollup-plugin-dts", "alias": false, "peer_metadata": null }	`^6.3.0`	development
styled-components Environment { "local_name": "styled-components", "alias": false, "peer_metadata": null }	`^6.3.8`	development
@rollup/plugin-url Environment { "local_name": "@rollup/plugin-url", "alias": false, "peer_metadata": null }	`^8.0.2`	development
@babel/preset-react Environment { "local_name": "@babel/preset-react", "alias": false, "peer_metadata": null }	`^7.28.5`	development
@rollup/plugin-json Environment { "local_name": "@rollup/plugin-json", "alias": false, "peer_metadata": null }	`^6.1.0`	development
@rollup/plugin-alias Environment { "local_name": "@rollup/plugin-alias", "alias": false, "peer_metadata": null }	`^6.0.0`	development
@rollup/plugin-babel Environment { "local_name": "@rollup/plugin-babel", "alias": false, "peer_metadata": null }	`^6.1.0`	development
@testing-library/dom Environment { "local_name": "@testing-library/dom", "alias": false, "peer_metadata": null }	`^10.4.1`	development
@types/styled-system Environment { "local_name": "@types/styled-system", "alias": false, "peer_metadata": null }	`^5.1.23`	development
@vitejs/plugin-react Environment { "local_name": "@vitejs/plugin-react", "alias": false, "peer_metadata": null }	`^6.0.1`	development
@rollup/plugin-terser Environment { "local_name": "@rollup/plugin-terser", "alias": false, "peer_metadata": null }	`^0.4.4`	development
rollup-plugin-postcss Environment { "local_name": "rollup-plugin-postcss", "alias": false, "peer_metadata": null }	`^4.0.2`	development
@rollup/plugin-replace Environment { "local_name": "@rollup/plugin-replace", "alias": false, "peer_metadata": null }	`^6.0.3`	development
@testing-library/react Environment { "local_name": "@testing-library/react", "alias": false, "peer_metadata": null }	`^16.3.2`	development
@rollup/plugin-commonjs Environment { "local_name": "@rollup/plugin-commonjs", "alias": false, "peer_metadata": null }	`^29.0.0`	development
@types/styled-components Environment { "local_name": "@types/styled-components", "alias": false, "peer_metadata": null }	`^5.1.36`	development
@rollup/plugin-typescript Environment { "local_name": "@rollup/plugin-typescript", "alias": false, "peer_metadata": null }	`^12.3.0`	development
@testing-library/jest-dom Environment { "local_name": "@testing-library/jest-dom", "alias": false, "peer_metadata": null }	`^6.9.1`	development
@rollup/plugin-node-resolve Environment { "local_name": "@rollup/plugin-node-resolve", "alias": false, "peer_metadata": null }	`^16.0.3`	development
@testing-library/user-event Environment { "local_name": "@testing-library/user-event", "alias": false, "peer_metadata": null }	`^14.6.1`	development
rollup-plugin-node-polyfills Environment { "local_name": "rollup-plugin-node-polyfills", "alias": false, "peer_metadata": null }	`^0.2.1`	development
rollup-plugin-peer-deps-external Environment { "local_name": "rollup-plugin-peer-deps-external", "alias": false, "peer_metadata": null }	`^2.2.4`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^16.14.0 \|\| ^17.0.0 \|\| ^18.0.0 \|\| ^19.2.3`	peer
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^16.14.0 \|\| ^17.0.0 \|\| ^18.0.0 \|\| ^19.2.3`	peer
styled-components Environment { "local_name": "styled-components", "alias": false, "peer_metadata": null }	`^6.0.0`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "7ab70e65674f219d38f40a4b0330f38d828942c8",
  "tarball": "https://registry.npmjs.org/54pay-payments-sdk/-/54pay-payments-sdk-1.0.7.tgz",
  "fileCount": 6,
  "integrity": "sha512-zwClaED8JnLn0GbcXJ9iyBTJAoAZZowgH0hgF0E0FWZYNE6BNQHwzaRThrOBZSH4T4vlF4rbLTgygbbqyT1HjQ==",
  "signatures": [
    {
      "sig": "MEUCIQDIqK05oLU43BwBlQ4SMPYAc+rEJLG5mPiamXWNUHWISgIgARh5FKOlTTWPkh5JvFa/bkMUJbb6Js6BMpoo84evVkw=",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 5990747
}

Repository

PENDING

mypaygate/web-sdk

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 20:25 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:cdba37eb2d4789c5cfba273b60f666e38e4708775a16ccf3fe1a4ef3026e75a0

Other collected versions

1.1.38 Oct 1.1.217 Sept 1.1.115 Sept 1.1.08 Sept 1.0.1128 Aug 1.0.1027 Aug View all collected versions →