angular-xylium-pg

Xylium Payment Gateway for your Online Business.

Install

with npm

npm install angular-xylium-pg

Usage

Xylium Payment Gateway uses sensible defaults, so only minimal configuration via props is necessary.

Basic configuration

How to do configuration in your Angular Project?

Step 1

Add the below script in angular-cli.json or angular.json.

  "scripts": [
    "./node_modules/angular-xylium-pg/index.js"
  ]

Step 2

In your Typescript file. follow the instructions.

To initialize the Xylium Payment.

//To Declare the Xylium Payment

declare var PgOrder: any;

// For Success and Error Handlers. You can get the Payment status in the below function, it may be success or error.

const pgHandler = ( function (e) {
  if(e.data.status == 'success'){
        console.log(e.data)
    }
    if(e.data.status == 'failure'){
        console.log(e.data)
    }
});
window.addEventListener('message', pgHandler);

//To Initialize the Xylium Payment

constructor(){
    PgOrder.init();
}

To Open the Xylium Payment Popup. Get the Order ID (ORDER_ID) from Step 3.

PgOrder.open("ORDER_ID", "PUBLIC_KEY");

To Close the Xylium Payment Popup

PgOrder.close();

Step 3

Create order from Server side using below API and get the Order id.

  POST API LINK :
  https://pg-api.accupaydtech.co/v1/order/create

  BODY:
  amount : YOUR_TRANSACTION_AMOUNT
  currency : YOUR_CURRENCY_CODE
  payment_modes : OPTIONAL /*  Available modes are cc,dc,nb,upi */
  customer : OPTIONAL /*note : auto render in payment popup*/

Example Request

  {
    "amount": YOUR_TRANSACTION_AMOUNT,
        "currency": YOUR_CURRENCY_CODE,
        "payment_modes": "cc,dc,nb,upi" ,
        "customer": {
          "name": Customer_Name,
          "email": Customer_Email,
          "phone": {
                "country_code": Phone_Country_Code ,
                "national_number": Phone_Number
            }
          }
  }

In response for the above request, you will get Order ID (order_id - params).

Step 4

When you click place order button our popup will be loaded so you can use below test card credentials to complete the order.

  Card Number 4545 4545 4545 4545
  Expiry 05/26
  CVV 123

Success and Error Handlers

React Xylium gives you the handlers for Payment status and details.

After Payment done, the below line sends the Payment details and status to pgHandler function.

window.addEventListener('message', this.pgHandler);

You can get the Payment status in the below function, it may be success or error.

const pgHandler = function (e) {
  if (e.data.status == "success") {
    console.log(e.data);
  }
  if (e.data.status == "failure") {
    console.log(e.data);
  }
};

Sample Integration - App.component.ts

import { Component, OnInit } from '@angular/core';
import "@angular/compiler";
declare var PgOrder: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'angular-demo';
  constructor() {
    console.log('Called Constructor');
    PgOrder.init();
  }

  ngOnInit() {
    console.log('Called ngOnInit method');
    const pgHandler = (function (e:any) {
      if (e.data.status === 'success') {
        console.log('Payment Success:', e.data);
      }
      if (e.data.status === 'failure') {
        console.log('Payment Failure:', e.data);
      }
    });
    window.addEventListener('message', pgHandler);
    PgOrder.open('YOUR_ORDER_ID', 'YOUR_PUBLIC_KEY'); 
  }
}

Author

This component is written by Xylium

License

Xylium 2025 © All Rights Reserved