Install the SDK

Before installing the SDK, ensure you have:

• An AcountPay account – You’ll need your Client ID from the merchant dashboard
• A supported environment – JavaScript/TypeScript (browser or Node.js), React optional

Installing AcountPay SDK

Choose from multiple installation methods based on your setup.

Quick Start (Recommended)

For fastest setup, use our CDN:

<script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
<script>
  const acount = new Acount({
    clientId: 'your-client-id-here'
  });
</script>

Package Manager Installation

NPM Installation

npm i @acountpay/pis-sdk

Yarn Installation

yarn add @acountpay/pis-sdk

Usage Methods

ES Module Import

import AcountPay from '@acountpay/pis-sdk';

const acount = new AcountPay({ 
  clientId: 'your-client-id' 
});

CDN Script Tag (Recommended)

<script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
<script>
  const acount = new Acount({ 
    clientId: 'your-client-id' 
  });
</script>

NPM Package UMD Build

<script src="/node_modules/@acountpay/pis-sdk/dist/acount.umd.js"></script>
<script>
  const acount = new Acount({ 
    clientId: 'your-client-id' 
  });
</script>

Unpkg CDN

<script src="https://unpkg.com/@acountpay/pis-sdk@1.0.0/dist/acount.umd.js"></script>
<script>
  const acount = new Acount({ 
    clientId: 'your-client-id' 
  });
</script>

Platform-Specific Integration

The examples below cover JavaScript frameworks (React, Next.js, Vue, Angular) for custom sites and SPAs. Load the SDK from the CDN or your bundler as shown in Usage Methods, then follow the pattern for your stack.

JavaScript Frameworks

Next.js

Installation:

npm i @acountpay/pis-sdk

Implementation:

// components/PaymentButton.tsx
'use client';
import { useState } from 'react';
import AcountPay from '@acountpay/pis-sdk';

export function PaymentButton({ amount, orderId }: { amount: number; orderId: string }) {
  const [loading, setLoading] = useState(false);

  const handlePayment = async () => {
    setLoading(true);
    try {
      const acount = new AcountPay({
        clientId: process.env.NEXT_PUBLIC_ACOUNTPAY_CLIENT_ID!
      });

      const { redirectUrl } = await acount.createPaymentLink({
        amount,
        referenceNumber: orderId,
        redirectUrl: `${window.location.origin}/payment-callback?orderId=${orderId}`,
      });

      window.location.href = redirectUrl;
    } catch (error) {
      console.error('Payment failed:', error);
      setLoading(false);
    }
  };

  return (
    <button onClick={handlePayment} disabled={loading}>
      {loading ? 'Processing...' : 'Pay with AcountPay'}
    </button>
  );
}

Environment Variables:

# .env.local
NEXT_PUBLIC_ACOUNTPAY_CLIENT_ID=your-client-id

React

Installation:

npm i @acountpay/pis-sdk

Implementation:

// components/PaymentButton.tsx
import { useState } from 'react';
import AcountPay from '@acountpay/pis-sdk';

export function PaymentButton({ amount, orderId }: { amount: number; orderId: string }) {
  const [loading, setLoading] = useState(false);

  const handlePayment = async () => {
    setLoading(true);
    try {
      const acount = new AcountPay({
        clientId: process.env.REACT_APP_ACOUNTPAY_CLIENT_ID!
      });

      const { redirectUrl } = await acount.createPaymentLink({
        amount,
        referenceNumber: orderId,
        redirectUrl: `${window.location.origin}/payment-callback?orderId=${orderId}`,
      });

      window.location.href = redirectUrl;
    } catch (error) {
      console.error('Payment failed:', error);
      setLoading(false);
    }
  };

  return (
    <button onClick={handlePayment} disabled={loading}>
      {loading ? 'Processing...' : 'Pay with AcountPay'}
    </button>
  );
}

Environment Variables:

# .env
REACT_APP_ACOUNTPAY_CLIENT_ID=your-client-id

Vue.js

Installation:

npm i @acountpay/pis-sdk

Implementation:

<template>
  <button @click="handlePayment" :disabled="loading">
    {{ loading ? 'Processing...' : 'Pay with AcountPay' }}
  </button>
</template>

<script>
import AcountPay from '@acountpay/pis-sdk';

export default {
  props: {
    amount: { type: Number, required: true },
    orderId: { type: String, required: true }
  },
  data() {
    return { loading: false };
  },
  methods: {
    async handlePayment() {
      this.loading = true;
      try {
        const acount = new AcountPay({
          clientId: process.env.VUE_APP_ACOUNTPAY_CLIENT_ID
        });

        const { redirectUrl } = await acount.createPaymentLink({
          amount: this.amount,
          referenceNumber: this.orderId,
          redirectUrl: `${window.location.origin}/payment-callback?orderId=${this.orderId}`,
        });

        window.location.href = redirectUrl;
      } catch (error) {
        console.error('Payment failed:', error);
        this.loading = false;
      }
    }
  }
};
</script>

Environment Variables:

# .env
VUE_APP_ACOUNTPAY_CLIENT_ID=your-client-id

Angular

Installation:

npm i @acountpay/pis-sdk

Implementation:

// payment-button.component.ts
import { Component } from '@angular/core';
import AcountPay from '@acountpay/pis-sdk';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-payment-button',
  template: `
    <button (click)="handlePayment()" [disabled]="loading">
      {{ loading ? 'Processing...' : 'Pay with AcountPay' }}
    </button>
  `
})
export class PaymentButtonComponent {
  loading = false;

  async handlePayment() {
    this.loading = true;
    try {
      const acount = new AcountPay({
        clientId: environment.acountpayClientId
      });

      const { redirectUrl } = await acount.createPaymentLink({
        amount: 99.99,
        referenceNumber: 'ORDER-123',
        redirectUrl: `${window.location.origin}/payment-callback`,
      });

      window.location.href = redirectUrl;
    } catch (error) {
      console.error('Payment failed:', error);
      this.loading = false;
    }
  }
}

Environment Configuration:

// environments/environment.ts
export const environment = {
  acountpayClientId: 'your-client-id'
};

Package Information

Contents

• Core payment flow utilities
• TypeScript definitions
• ESM/CJS/UMD builds for broad compatibility
• No embedded UI components (integrates with your existing design)

Browser Support

• Modern browsers with ES6 support
• Chrome 60+, Firefox 60+, Safari 12+, Edge 79+

Bundle Sizes

• UMD: ~15KB gzipped
• ESM: ~12KB gzipped
• No external dependencies

Environment Variables

For framework integrations, set up environment variables:

React

# .env
REACT_APP_ACOUNTPAY_CLIENT_ID=your-client-id

Vue.js

# .env
VUE_APP_ACOUNTPAY_CLIENT_ID=your-client-id

Next.js

# .env.local
NEXT_PUBLIC_ACOUNTPAY_CLIENT_ID=your-client-id

Angular

// environments/environment.tsd
export const environment = {
  production: false,
  acountpayClientId: 'your-client-id'
};

Important Notes

Global Constructor Name

• NPM/ESM: Import as AcountPay
• UMD/Script Tag: Global constructor is Acount (not AcountPay)

Client ID Setup

1. Get your Client ID from AcountPay merchant dashboard
2. Use sandbox Client ID for testing
3. Switch to production Client ID for live payments

Version Pinning

For production, pin to specific versions:

<!-- Pin to specific version -->
<script src="https://unpkg.com/@acountpay/pis-sdk@1.0.4/dist/acount.umd.js"></script>

Next Steps

1. Get Client ID: Sign up at merchant.acountpay.com
2. Test Integration: Use sandbox Client ID for testing
3. Go Live: Switch to production Client ID

See Setup SDK for detailed configuration and Initialize Payment for implementation examples.