Initialize Payment

After setting up the SDK, you can initiate payments using two methods: User Payment (for account holders) or Guest Payment (for one-time payments).

Payment Methods Overview

Method	Use Case	User Experience	Best For
User Payment	Account holders or new users	Redirects to AcountPay portal	Subscriptions, repeat customers
Guest Payment	One-time payments	In-page payment flow	Single purchases, checkout flows

User Payment Method

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

Parameters

Parameter	Type	Required	Description
`amount`	`number`	✅ Yes	Payment amount in major currency units (e.g., 10.50 = $10.50)
`requestId`	`string`	✅ Yes	Unique request identifier (your order ID)
`callbackURL`	`string`	✅ Yes	URL the user is returned to after the payment flow

Basic Implementation

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

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

Complete Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
</head>
<body>
  <button onclick="payAsUser()">Pay with AcountPay Account</button>
  
  <script>
    async function payAsUser() {
      const acount = new Acount({ 
        clientId: 'your-client-id'
      });
      
      try {
        await acount.initiateUserPaymentByEmail({
          amount: 99.99, // Your actual amount
          requestId: 'ORDER-123', // Your actual order ID
          callbackURL: 'https://your-website.com/payment-success'
        });
      } catch (error) {
        console.error('Payment failed:', error);
        alert('Payment could not be initiated. Please try again.');
      }
    }
  </script>
</body>
</html>

Guest Payment Method

For one-time payments without requiring account creation.

Parameters

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

Basic Implementation

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

acount.initiatePayment({
  amount: 99.99,
  referenceNumber: 'ORDER-' + orderId,
  onSuccess: (result) => {
    console.log('Payment successful:', result);
    // Redirect to success page or update UI
    window.location.href = '/payment-success';
  },
  onError: (error) => {
    console.error('Payment failed:', error);
    // Handle error gracefully
    alert('Payment failed. Please try again.');
  }
});

Complete Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
</head>
<body>
  <button onclick="payAsGuest()">Pay as Guest</button>
  
  <script>
    function payAsGuest() {
      const acount = new Acount({ 
        clientId: 'your-client-id'
      });
      
      acount.initiatePayment({
        amount: 99.99, // Your actual amount
        referenceNumber: 'ORDER-123', // Your actual order ID
        onSuccess: function(result) {
          console.log('Payment successful:', result);
          window.location.href = '/order-confirmation';
        },
        onError: function(error) {
          console.error('Payment failed:', error);
          alert('Payment failed. Please try again.');
        }
      });
    }
  </script>
</body>
</html>

Framework Integration Examples

React
Vue.js

import { useState } from 'react';

// Note: Add script tag to index.html or load dynamically
// <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 handleUserPayment = async () => {
    setLoading(true);
    const acount = new window.Acount({
      clientId: process.env.REACT_APP_ACOUNTPAY_CLIENT_ID
    });
    
    try {
      await acount.initiateUserPaymentByEmail({
        amount,
        requestId: orderId,
        callbackURL: `${window.location.origin}/payment-callback`
      });
    } catch (error) {
      console.error('Payment failed:', error);
      setLoading(false);
    }
  };

  const handleGuestPayment = () => {
    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);
      }
    });
  };

  return (
    <div className="space-y-4">
      <button 
        onClick={handleUserPayment} 
        disabled={loading}
        className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg"
      >
        {loading ? 'Processing...' : 'Pay with AcountPay Account'}
      </button>
      
      <button 
        onClick={handleGuestPayment} 
        disabled={loading}
        className="w-full bg-green-600 text-white py-3 px-6 rounded-lg"
      >
        {loading ? 'Processing...' : 'Pay as Guest'}
      </button>
    </div>
  );
}

<template>
  <div class="payment-buttons">
    <button @click="handleUserPayment" :disabled="loading">
      {{ loading ? 'Processing...' : 'Pay with AcountPay Account' }}
    </button>
    <button @click="handleGuestPayment" :disabled="loading">
      {{ loading ? 'Processing...' : 'Pay as Guest' }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'PaymentButton',
  props: {
    amount: {
      type: Number,
      required: true
    },
    orderId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    async handleUserPayment() {
      this.loading = true;
      const acount = new window.Acount({
        clientId: process.env.VUE_APP_ACOUNTPAY_CLIENT_ID
      });
      
      try {
        await acount.initiateUserPaymentByEmail({
          amount: this.amount,
          requestId: this.orderId,
          callbackURL: `${window.location.origin}/payment-callback`
        });
      } catch (error) {
        console.error('Payment failed:', error);
        this.loading = false;
      }
    },
    
    handleGuestPayment() {
      this.loading = true;
      const acount = new window.Acount({
        clientId: process.env.VUE_APP_ACOUNTPAY_CLIENT_ID
      });
      
      acount.initiatePayment({
        amount: this.amount,
        referenceNumber: this.orderId,
        onSuccess: (result) => {
          console.log('Payment successful:', result);
          this.$router.push('/payment-success');
        },
        onError: (error) => {
          console.error('Payment failed:', error);
          this.loading = false;
        }
      });
    }
  }
};
</script>

Flow Overview

User Payment Flow

SDK Initialization: Initialize with your Client ID
Payment Request: SDK calls your backend with payment details
User Portal: Browser redirects to AcountPay user portal where user:
- Creates account or logs in
- Links IBAN to their account
- Authenticates and consents to payment
Return: User is redirected back to your callbackURL

Guest Payment Flow

SDK Initialization: Initialize with your Client ID
Payment Interface: SDK opens payment interface
Bank Selection: User selects their bank
Bank Authentication: User authenticates with their bank
Completion: Success/error callbacks are triggered

Error Handling

Common Error Scenarios

acount.initiatePayment({
  amount: 99.99,
  referenceNumber: 'ORDER-123',
  onSuccess: (result) => {
    // Payment successful
    console.log('Payment completed:', result);
    // Update UI, redirect, etc.
  },
  onError: (error) => {
    // Handle different error types
    if (error.type === 'user_cancelled') {
      console.log('User cancelled the payment');
      // Show appropriate message
    } else if (error.type === 'insufficient_funds') {
      console.log('Insufficient funds');
      // Suggest alternative payment methods
    } else {
      console.error('Payment error:', error);
      // Show generic error message
    }
  }
});

Important Implementation Notes

Real Values Usage

// ❌ Don't use demo values in production
const acount = new Acount({
  clientId: "YOUR_CLIENT_ID_HERE" // Replace with actual client ID
});

acount.initiatePayment({
  amount: 1, // Replace with actual amount
  referenceNumber: "PAY" + Math.random(), // Replace with actual order ID
});

// ✅ Use actual values
const acount = new Acount({
  clientId: "682ad984-e692-4438-8503-b7e8b6ca1f94" // Your real client ID
});

acount.initiatePayment({
  amount: cartTotal, // Your actual transaction amount
  referenceNumber: orderId, // Your actual order reference
});

Amount Guidelines

Use major currency units (e.g., 10.50 for $10.50)
Don’t use smallest currency units (cents/pence)
Ensure amounts match your actual transaction values

Reference Number Best Practices

Use your internal order ID or transaction reference
Ensure uniqueness to avoid duplicate payments
This allows matching successful payments back to orders

Testing

Sandbox Testing

Use your sandbox Client ID from the dashboard
Test both payment methods
Verify callback handling
Check webhook notifications

Production Checklist

For detailed testing guidelines, see Integration Testing.

Payments SDK

Account Information SDK

Payment Methods Overview

User Payment Method

Guest Payment Method

Framework Integration Examples

Flow Overview

Error Handling

Important Implementation Notes

Testing

Payments SDK

Account Information SDK

​Payment Methods Overview

​User Payment Method

​Guest Payment Method

​Framework Integration Examples

​Flow Overview

​Error Handling

​Important Implementation Notes

​Testing

Payment Methods Overview

User Payment Method

Guest Payment Method

Framework Integration Examples

Flow Overview

Error Handling

Important Implementation Notes

Testing