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/[email protected]/dist/acount.umd.js"></script>
<script>
  const acount = new Acount({ 
    clientId: 'your-client-id' 
  });
</script>

Platform-Specific Integration

E-commerce Platforms

Shopify
WooCommerce

Method 1: Simple Product/Cart Page Integration

Go to Online Store → Themes → Actions → Edit code
Find theme.liquid and add the SDK before </head>:

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

Create a new snippet file snippets/acountpay-button.liquid:

{% comment %}
  AcountPay Payment Button Snippet
  Usage: {% include 'acountpay-button' %}
{% endcomment %}

<div class="acountpay-payment-section" style="margin: 20px 0; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9;">
  <h3 style="margin: 0 0 10px 0; font-size: 18px;">Pay with Bank Account</h3>
  <p style="margin: 0 0 15px 0; color: #666; font-size: 14px;">Secure bank-to-bank payment via AcountPay</p>
  
  <button 
    id="acountpay-payment-btn-{{ section.id | default: 'main' }}" 
    class="btn btn-primary acountpay-btn"
    style="background: #0066cc; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%;"
    type="button"
  >
    Pay with AcountPay
  </button>
</div>

<script>
(function() {
  const buttonId = 'acountpay-payment-btn-{{ section.id | default: "main" }}';
  const button = document.getElementById(buttonId);
  
  if (button && typeof Acount !== 'undefined') {
    button.addEventListener('click', function() {
      const acount = new Acount({
        clientId: "{{ settings.acountpay_client_id }}" // Configure in theme settings
      });
      
      // Get product/cart info
      {% if product %}
        // Single product page
        const amount = {{ product.price | divided_by: 100.0 }};
        const productId = {{ product.id }};
        const referenceNumber = "SHOPIFY-PRODUCT-" + productId + "-" + Date.now();
      {% elsif cart %}
        // Cart page
        const amount = {{ cart.total_price | divided_by: 100.0 }};
        const referenceNumber = "SHOPIFY-CART-" + Date.now();
      {% else %}
        // Fallback
        const amount = 0;
        const referenceNumber = "SHOPIFY-" + Date.now();
      {% endif %}
      
      if (amount <= 0) {
        alert('Please add items to cart first');
        return;
      }
      
      acount.initiatePayment({
        amount: amount,
        referenceNumber: referenceNumber,
        onSuccess: function(result) {
          console.log('Payment successful:', result);
          
          // Option 1: Redirect to a thank you page
          window.location.href = "/pages/payment-success";
          
          // Option 2: Show success message and redirect to cart
          // alert('Payment successful! Redirecting to cart...');
          // window.location.href = "/cart";
        },
        onError: function(error) {
          console.error('Payment failed:', error);
          alert('Payment failed. Please try again or contact support.');
        }
      });
    });
  } else if (button) {
    // SDK not loaded yet, retry after a delay
    setTimeout(function() {
      if (typeof Acount !== 'undefined') {
        button.click();
      } else {
        alert('Payment system is still loading. Please try again in a moment.');
      }
    }, 1000);
  }
})();
</script>

Add AcountPay settings to your theme:

Create or edit config/settings_schema.json and add this section:

{
  "name": "AcountPay Settings",
  "settings": [
    {
      "type": "text",
      "id": "acountpay_client_id",
      "label": "AcountPay Client ID",
      "info": "Get this from your AcountPay merchant dashboard"
    },
    {
      "type": "checkbox",
      "id": "acountpay_enabled",
      "label": "Enable AcountPay",
      "default": false
    }
  ]
}

Add the button to product pages by editing sections/product-form.liquid:

<!-- Add this after the Add to Cart button -->
{% if settings.acountpay_enabled and settings.acountpay_client_id != blank %}
  {% include 'acountpay-button' %}
{% endif %}

Add to cart page by editing templates/cart.liquid:

<!-- Add this in the cart template -->
{% if settings.acountpay_enabled and settings.acountpay_client_id != blank and cart.item_count > 0 %}
  {% include 'acountpay-button' %}
{% endif %}

Method 2: Checkout Integration (Advanced)For checkout page integration, you’ll need Shopify Plus or use checkout extensibility:

Create checkout.liquid (Shopify Plus only):

{{ content_for_header }}
{{ checkout_scripts }}
{{ checkout_stylesheets }}

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

<div class="main">
  <div class="step">
    {{ content_for_layout }}
    
    <!-- Add AcountPay option after payment methods -->
    {% if checkout.payment_due > 0 %}
      <div class="acountpay-checkout-option">
        <h3>Alternative Payment Method</h3>
        <button id="acountpay-checkout-btn" class="btn btn-primary">
          Pay {{ checkout.payment_due | money }} with Bank Account
        </button>
      </div>
    {% endif %}
  </div>
</div>

<script>
document.getElementById('acountpay-checkout-btn')?.addEventListener('click', function() {
  const acount = new Acount({
    clientId: "{{ settings.acountpay_client_id }}"
  });
  
  acount.initiatePayment({
    amount: {{ checkout.payment_due | divided_by: 100.0 }},
    referenceNumber: "{{ checkout.order_number | default: checkout.id }}",
    onSuccess: function(result) {
      // Complete the Shopify checkout
      window.location.href = "{{ checkout.success_url }}";
    },
    onError: function(error) {
      alert('Payment failed: ' + error.message);
    }
  });
});
</script>

Configuration Steps:

Go to Online Store → Themes → Customize
Navigate to Theme settings → AcountPay Settings
Enter your Client ID and enable AcountPay
Save and test with a product

Create Success Page: Create a new page pages/payment-success.liquid:

<div class="payment-success">
  <h1>Payment Successful!</h1>
  <p>Thank you for your payment. Your order has been received and will be processed shortly.</p>
  <p><a href="{{ routes.collections_url }}" class="btn">Continue Shopping</a></p>
</div>

Important Notes:

Test thoroughly before going live
Consider inventory management for successful payments
Set up webhooks to handle order fulfillment
This integration works alongside existing payment methods

Frontend Frameworks

React
Vue.js
Next.js
Angular

Installation:

npm i @acountpay/pis-sdk

Implementation:

// components/PaymentButton.tsx
import AcountPay from '@acountpay/pis-sdk';

export function PaymentButton() {
  const handlePayment = async () => {
    const acount = new AcountPay({
      clientId: process.env.REACT_APP_ACOUNTPAY_CLIENT_ID!
    });
    
    await acount.initiateUserPaymentByEmail({
      amount: 99.99,
      requestId: 'ORDER-123',
      callbackURL: `${window.location.origin}/payment-callback`
    });
  };

  return (
    <button onClick={handlePayment}>
      Pay with AcountPay
    </button>
  );
}

Environment Variables:

# .env
REACT_APP_ACOUNTPAY_CLIENT_ID=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
Vue.js
Next.js
Angular

# .env
REACT_APP_ACOUNTPAY_CLIENT_ID=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

Get your Client ID from AcountPay merchant dashboard
Use sandbox Client ID for testing
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/[email protected]/dist/acount.umd.js"></script>

Next Steps

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

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

Payments SDK

Account Information SDK

Install the SDK

Installing AcountPay SDK

Quick Start (Recommended)

Package Manager Installation

NPM Installation

Yarn Installation

Usage Methods

Platform-Specific Integration

E-commerce Platforms

Frontend Frameworks

Package Information

Environment Variables

Important Notes

Next Steps

Payments SDK

Account Information SDK

​Installing AcountPay SDK

​Quick Start (Recommended)

​Package Manager Installation

​NPM Installation

​Yarn Installation

​Usage Methods

​Platform-Specific Integration

​E-commerce Platforms

​Frontend Frameworks

​Package Information

​Environment Variables

​Important Notes

​Next Steps

Installing AcountPay SDK

Quick Start (Recommended)

Package Manager Installation

NPM Installation

Yarn Installation

Usage Methods

Platform-Specific Integration

E-commerce Platforms

Frontend Frameworks

Package Information

Environment Variables

Important Notes

Next Steps