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/[email protected]/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 two main payment initiation methods:

User Payment (Recommended)

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'
});

Guest Payment

For one-time payments without account creation:

acount.initiatePayment({
  amount: 99.99,
  referenceNumber: 'ORDER-123',
  onSuccess: (result) => {
    console.log('Payment successful:', result);
    // Redirect to success page or update UI
  },
  onError: (error) => {
    console.error('Payment failed:', error);
    // Handle error gracefully
  }
});

Method Parameters

`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)
`onSuccess`	`function`	❌ No	Success callback function
`onError`	`function`	❌ No	Error callback function

Real Implementation Examples

Basic E-commerce Integration

<!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>
    // Replace with your actual client ID from dashboard
    const acount = new Acount({
      clientId: "your-actual-client-id"
    });

    document.getElementById('pay-button').onclick = function() {
      acount.initiatePayment({
        amount: 99.99, // Use your actual product/cart total
        referenceNumber: "ORDER-" + Date.now(), // Use your actual order ID
        onSuccess: function(result) {
          console.log('Payment successful:', result);
          // Redirect to success page
          window.location.href = '/order-confirmation';
        },
        onError: function(error) {
          console.error('Payment failed:', error);
          alert('Payment failed. Please try again.');
        }
      });
    };
  </script>
</body>
</html>

React Integration Example

// components/PaymentButton.tsx
import { useState } from 'react';

// Add script tag to public/index.html:
// <script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>

declare global {
  interface Window {
    Acount: any;
  }
}

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

  const handlePayment = () => {
    setLoading(true);
    
    const acount = new window.Acount({
      clientId: process.env.REACT_APP_ACOUNTPAY_CLIENT_ID
    });
    
    acount.initiatePayment({
      amount,
      referenceNumber: orderId,
      onSuccess: (result: any) => {
        console.log('Payment successful:', result);
        window.location.href = '/payment-success';
      },
      onError: (error: any) => {
        console.error('Payment failed:', error);
        setLoading(false);
        alert('Payment failed. 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>
  );
}

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 = function() {
  const acount = new Acount({
    clientId: "your-client-id" // Replace with your actual client ID
  });
  
  acount.initiatePayment({
    amount: parseFloat(document.getElementById('total-amount').textContent),
    referenceNumber: document.getElementById('order-id').value,
    onSuccess: function(result) {
      // Handle success
      window.location.href = '/thank-you';
    },
    onError: function(error) {
      // Handle error
      alert('Payment failed: ' + error.message);
    }
  });
};
</script>

WordPress/WooCommerce Integration

Add this to your theme’s functions.php:

// Add SDK script
function add_acountpay_scripts() {
    if (is_checkout()) {
        wp_enqueue_script('acountpay-sdk', 'https://cdn.acountpay.com/sdk/acount.umd.js', array(), '1.0.4', true);
    }
}
add_action('wp_enqueue_scripts', 'add_acountpay_scripts');

// Add payment button to checkout
function add_acountpay_button() {
    if (is_checkout() && WC()->cart && WC()->cart->get_total('raw') > 0) {
        ?>
        <div style="margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px;">
            <h4>Pay with Bank Account</h4>
            <button type="button" id="acountpay-btn" style="background: #0066cc; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">
                Pay <?php echo WC()->cart->get_total(); ?> with AcountPay
            </button>
        </div>
        
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('acountpay-btn').onclick = function() {
                if (typeof Acount === 'undefined') {
                    alert('Payment system loading, please wait...');
                    return;
                }
                
                const acount = new Acount({
                    clientId: "<?php echo esc_js(get_option('acountpay_client_id', '')); ?>"
                });
                
                acount.initiatePayment({
                    amount: <?php echo WC()->cart->get_total('raw'); ?>,
                    referenceNumber: "ORDER-" + Date.now(),
                    onSuccess: function(result) {
                        alert('Payment successful! Your order will be processed.');
                        window.location.reload();
                    },
                    onError: function(error) {
                        alert('Payment failed: ' + error.message);
                    }
                });
            };
        });
        </script>
        <?php
    }
}
add_action('woocommerce_checkout_after_customer_details', 'add_acountpay_button');

// Add admin setting for client ID
function acountpay_admin_setting() {
    add_settings_field(
        'acountpay_client_id',
        'AcountPay Client ID',
        function() {
            $value = get_option('acountpay_client_id', '');
            echo '<input type="text" name="acountpay_client_id" value="' . esc_attr($value) . '" />';
            echo '<p class="description">Get this from your AcountPay dashboard</p>';
        },
        'general',
        'default'
    );
    register_setting('general', 'acountpay_client_id');
}
add_action('admin_init', 'acountpay_admin_setting');

Configuration: Go to WordPress Admin → Settings → General → AcountPay Client ID

Shopify Integration

Step 1: Go to Online Store → Themes → Actions → Edit codeStep 2: In theme.liquid, add before </head>:

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

Step 3: Create snippets/acountpay-button.liquid:

<div style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px;">
  <h3>Pay with Bank Account</h3>
  <button id="acountpay-btn" style="background: #0066cc; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; width: 100%;">
    Pay with AcountPay
  </button>
</div>

<script>
document.getElementById('acountpay-btn').onclick = function() {
  if (typeof Acount === 'undefined') {
    alert('Payment system loading...');
    return;
  }
  
  const acount = new Acount({
    clientId: "{{ settings.acountpay_client_id }}"
  });
  
  {% if product %}
    const amount = {{ product.price | divided_by: 100.0 }};
    const reference = "SHOPIFY-PRODUCT-{{ product.id }}-" + Date.now();
  {% elsif cart %}
    const amount = {{ cart.total_price | divided_by: 100.0 }};
    const reference = "SHOPIFY-CART-" + Date.now();
  {% else %}
    const amount = 0;
    const reference = "SHOPIFY-" + Date.now();
  {% endif %}
  
  if (amount <= 0) {
    alert('Please add items to cart first');
    return;
  }
  
  acount.initiatePayment({
    amount: amount,
    referenceNumber: reference,
    onSuccess: function(result) {
      alert('Payment successful!');
      window.location.href = "/pages/payment-success";
    },
    onError: function(error) {
      alert('Payment failed: ' + error.message);
    }
  });
};
</script>

Step 4: Add to config/settings_schema.json:

{
  "name": "AcountPay",
  "settings": [
    {
      "type": "text",
      "id": "acountpay_client_id",
      "label": "Client ID",
      "info": "Get this from AcountPay dashboard"
    }
  ]
}

Step 5: Include in templates:

<!-- In product-form.liquid or cart.liquid -->
{% if settings.acountpay_client_id != blank %}
  {% include 'acountpay-button' %}
{% endif %}

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

Account Information SDK

Prerequisites

Initialization

Basic Setup

CDN Integration (Recommended)

UMD Build Setup (Script Tag)

Configuration Options

Payment Methods

User Payment (Recommended)

Guest Payment

Method Parameters

`initiateUserPaymentByEmail`

`initiatePayment`

Real Implementation Examples

Platform Integration

Important Notes

Next Steps

Troubleshooting

Payments SDK

Account Information SDK

​Prerequisites

​Initialization

​Basic Setup

​CDN Integration (Recommended)

​UMD Build Setup (Script Tag)

​Configuration Options

​Payment Methods

​User Payment (Recommended)

​Guest Payment

​Method Parameters

​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

User Payment (Recommended)

Guest Payment

Method Parameters

`initiateUserPaymentByEmail`

`initiatePayment`

Real Implementation Examples

Platform Integration

Important Notes

Next Steps

Troubleshooting