Setup the SDK

After installing the AcountPay SDK, follow these steps to set it up in your project.

Prerequisites

Installed AcountPay SDK (see Install the SDK)
Your AcountPay Client ID from the merchant dashboard

Initialization

Initialize the SDK with your client ID.

Basic Setup

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

// Initialize the SDK
const acount = new AcountPay({
  clientId: 'your-client-id-here', // Required: From merchant dashboard
});

CDN Integration (Recommended)

For quick 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>

UMD Build Setup (Script Tag)

If using the UMD build from npm:

<script src="https://unpkg.com/@acountpay/pis-sdk@1.0.4/dist/acount.umd.js"></script>
<script>
  // Initialize the SDK - note the global name is 'Acount'
  const acount = new Acount({
    clientId: 'your-client-id-here'
  });
</script>

Configuration Options

Option	Type	Required	Description
`clientId`	`string`	✅ Yes	Your AcountPay client ID from the dashboard

Payment Methods

The SDK provides three payment methods. Payment Link is recommended for most website integrations.

Payment Link (Recommended)

Creates a payment and redirects the customer to a hosted payment page where they select their bank and complete authentication. After payment, the customer is returned to your redirectUrl with a ?status=success|failed|pending query parameter.

const { redirectUrl } = await acount.createPaymentLink({
  amount: 99.99,
  referenceNumber: 'ORDER-123',
  redirectUrl: 'https://your-website.com/payment-callback',
});

window.location.href = redirectUrl;

User Payment

For users with AcountPay accounts or those who want to create one:

await acount.initiateUserPaymentByEmail({
  amount: 99.99,
  requestId: 'ORDER-123',
  callbackURL: 'https://your-website.com/payment-callback'
});

Direct Bank Payment

Redirects the customer directly to Token.io’s hosted bank authentication page. The customer is redirected away from your site for bank selection and SCA. Best suited for simple integrations where you don’t need control over the return URL.

await acount.initiatePayment({
  amount: 99.99,
  referenceNumber: 'ORDER-123',
});

Method Parameters

`createPaymentLink` (Recommended)

Parameter	Type	Required	Description
`amount`	`number`	✅ Yes	Payment amount in major currency units (e.g., 10.50)
`referenceNumber`	`string`	✅ Yes	Unique reference number (your order ID)
`redirectUrl`	`string`	✅ Yes	URL to return the customer to after payment
`description`	`string`	❌ No	Description shown to the customer during payment
`currency`	`string`	❌ No	Currency code (default: `DKK`)
`webhookUrl`	`string`	❌ No	Server-side URL to receive payment status updates

Returns: { success, redirectUrl, paymentId, message }

`initiateUserPaymentByEmail`

Parameter	Type	Required	Description
`amount`	`number`	✅ Yes	Payment amount in major currency units
`requestId`	`string`	✅ Yes	Unique request identifier (your order ID)
`callbackURL`	`string`	✅ Yes	URL to redirect after payment completion

`initiatePayment`

Parameter	Type	Required	Description
`amount`	`number`	✅ Yes	Payment amount in major currency units
`referenceNumber`	`string`	✅ Yes	Unique reference number (your order ID)
`currency`	`string`	❌ No	Currency code (default: `DKK`)

initiatePayment redirects the customer away from your site to Token.io for bank authentication. Use createPaymentLink instead if you need control over where the customer returns after payment.

Real Implementation Examples

Basic E-commerce Integration (Recommended)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
</head>
<body>
  <div class="checkout">
    <h2>Checkout - $99.99</h2>
    <button id="pay-button">Pay with AcountPay</button>
  </div>

  <script>
    const acount = new Acount({
      clientId: "your-actual-client-id"
    });

    document.getElementById('pay-button').onclick = async function() {
      try {
        const { redirectUrl } = await acount.createPaymentLink({
          amount: 99.99,
          referenceNumber: "ORDER-" + Date.now(),
          redirectUrl: window.location.origin + '/payment-callback',
        });
        window.location.href = redirectUrl;
      } catch (error) {
        console.error('Payment failed:', error);
        alert('Could not start payment. Please try again.');
      }
    };
  </script>
</body>
</html>

React / Next.js Integration Example

// 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);
      alert('Could not start payment. Please try again.');
    }
  };

  return (
    <button
      onClick={handlePayment}
      disabled={loading}
      className="bg-blue-600 text-white px-6 py-3 rounded"
    >
      {loading ? 'Processing...' : 'Pay with AcountPay'}
    </button>
  );
}

Handle the return on your callback page:

// app/payment-callback/page.tsx
'use client';
import { useSearchParams } from 'next/navigation';

export default function PaymentCallback() {
  const searchParams = useSearchParams();
  const status = searchParams.get('status');
  const orderId = searchParams.get('orderId');

  if (status === 'success') {
    return <div>Payment successful! Order {orderId} confirmed.</div>;
  }
  if (status === 'failed') {
    return <div>Payment failed. <a href="/checkout">Try again</a></div>;
  }
  return <div>Payment is processing. We'll notify you when it completes.</div>;
}

Platform Integration

Simple Website Integration

For basic websites, add this to your checkout page:

<!-- Add SDK -->
<script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>

<!-- Payment Button -->
<button id="acountpay-btn" class="payment-button">
  Pay with Bank Account
</button>

<script>
document.getElementById('acountpay-btn').onclick = async function() {
  const acount = new Acount({
    clientId: "your-client-id"
  });

  try {
    const { redirectUrl } = await acount.createPaymentLink({
      amount: parseFloat(document.getElementById('total-amount').textContent),
      referenceNumber: document.getElementById('order-id').value,
      redirectUrl: window.location.origin + '/thank-you',
    });
    window.location.href = redirectUrl;
  } catch (error) {
    alert('Payment failed: ' + error.message);
  }
};
</script>

Important Notes

Client ID Setup

Get your Client ID from the AcountPay merchant dashboard
Replace "your-client-id-here" with your actual Client ID
Use different Client IDs for sandbox and production environments

Amount and Reference Guidelines

Amount: Use actual transaction amounts in major currency units (e.g., 10.50 for $10.50)
Reference: Use your actual order IDs or transaction references for tracking
This allows you to match successful payments back to orders in your system

Testing

Sandbox: Use sandbox Client ID for testing
Production: Switch to production Client ID when ready
Error Handling: Always implement proper error handling

Next Steps

See Initialize Payment for detailed examples and Integration Testing for testing guidelines.

Troubleshooting

“Acount is not defined”: Ensure the script is loaded before initialization
Invalid client ID: Verify your client ID from the merchant dashboard
Payment not processing: Check browser console for errors and ensure all parameters are provided

Payments SDK

WooCommerce Plugin

Account Information SDK

Prerequisites

Initialization

Basic Setup

CDN Integration (Recommended)

UMD Build Setup (Script Tag)

Configuration Options

Payment Methods

Payment Link (Recommended)

User Payment

Direct Bank Payment

Method Parameters

`createPaymentLink` (Recommended)

`initiateUserPaymentByEmail`

`initiatePayment`

Real Implementation Examples

Platform Integration

Important Notes

Next Steps

Troubleshooting

Payments SDK

WooCommerce Plugin

Account Information SDK

​Prerequisites

​Initialization

​Basic Setup

​CDN Integration (Recommended)

​UMD Build Setup (Script Tag)

​Configuration Options

​Payment Methods

​Payment Link (Recommended)

​User Payment

​Direct Bank Payment

​Method Parameters

​createPaymentLink (Recommended)

​initiateUserPaymentByEmail

​initiatePayment

​Real Implementation Examples

​Platform Integration

​Important Notes

​Next Steps

​Troubleshooting

Prerequisites

Initialization

Basic Setup

CDN Integration (Recommended)

UMD Build Setup (Script Tag)

Configuration Options

Payment Methods

Payment Link (Recommended)

User Payment

Direct Bank Payment

Method Parameters

`createPaymentLink` (Recommended)

`initiateUserPaymentByEmail`

`initiatePayment`

Real Implementation Examples

Platform Integration

Important Notes

Next Steps

Troubleshooting