@acountpay/pis-sdk

v1.0.4

Published

3 months ago

A simple payment integration for your website that allows secure bank payments through Open Banking.

0High
0Medium
0Low

paywithacount

bhushandangore

AcountPay SDK

A simple payment integration for your website that allows secure bank payments through Open Banking.

5-Minute Integration Guide

Step 1: Add the SDK to your website

Add this script tag to your HTML page (preferably in the <head> section):

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

Step 2: Create a payment button

Option 1: Use our Button Generator (Recommended)

Visit buttons.acountpay.com to generate custom payment buttons or banners.

Option 2: Add payment buttons manually

<button id="pay-button">Pay with AcountPay</button>

<script>
  document.getElementById('pay-button').addEventListener('click', function() {
    // Initialize the SDK with your client ID
    const acount = new Acount({
      clientId: "YOUR_CLIENT_ID" // Replace with your client ID from AcountPay dashboard
    });
    
    // Start the payment flow
    acount.initiatePayment({
      amount: 99.99, // The amount to charge (in your currency)
      referenceNumber: "ORDER-123", // Your unique order reference
      onSuccess: function(result) {
        // Handle successful payment
        console.log("Payment successful!", result);
        // Redirect to thank you page or show success message
      },
      onError: function(error) {
        // Handle payment error
        console.error("Payment failed", error);
      }
    });
  });
</script>

Step 3: That's it!

Your integration is now complete. Test the payment flow by clicking your payment button.

Platform-Specific Guides

Shopify

Go to your Shopify admin → Online Store → Themes → Edit HTML/CSS
Find the theme.liquid file and add our script before the closing </head> tag:
```
<script src="https://cdn.acountpay.com/sdk/acount.umd.js"></script>
```
Navigate to Settings → Checkout → Order status page
Add the payment button code in the "Additional scripts" section

WooCommerce

Install and activate the "Header and Footer Scripts" plugin
Go to Settings → Header and Footer Scripts

Add our script to the "Scripts in Header" section:

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

Go to Appearance → Theme Editor → Additional CSS and add button styling

Advanced Usage

For registered users with accounts:

const acount = new Acount({
  clientId: "YOUR_CLIENT_ID"
});

acount.initiateUserPaymentByEmail({
  amount: 99.99,
  requestId: "ORDER-123",
  callbackURL: "https://yourwebsite.com/payment-callback"
});

Important Implementation Notes

Client ID

Replace "YOUR_CLIENT_ID" with your actual client ID from the AcountPay dashboard. Each merchant has a unique client ID for authentication.

Amount

The amount field should be your actual transaction amount:

Use your cart total, product price, or calculated amount
Example: Replace amount: 1 with amount: cartTotal or amount: productPrice

Reference Number

The referenceNumber (or requestId) should be your unique order/transaction identifier:

Use your order ID, invoice number, or transaction reference
Example: Replace random generation with referenceNumber: orderId or requestId: invoiceNumber
This allows you to match successful payments back to orders in your system

Real Implementation Example

// Instead of demo values:
const acount = new Acount({
  clientId: "YOUR_CLIENT_ID_HERE" // Replace with actual client ID
});

acount.initiatePayment({
  amount: 1, // Replace with actual amount
  referenceNumber: "PAY" + String(Math.random()), // Replace with actual reference
  // ... other options
});

// 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
  // ... other options
});