{
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

//Import HttpClientModule  and add Providers : [HttpClient] in your module.ts file

export interface Payload {
  merchantAuthentication: MerchantAuthentication;
  transactionRequest: TransactionRequest;
  personalization: Personalization;
  notificationOption: NotificationOption;
  preferences: Preferences;
}
export interface MerchantAuthentication {
  merchantId: string;
  transactionReferenceId: string;
}
export interface TransactionRequest {
  transactionType: number;
  amount: number;
  calculateFee: boolean;
  invoiceNumber: string;
}
export interface Personalization {
  logo: string;
  themeColor: string;
  description: string;
  payNowButtonText: string;
  buttonColor: string;
  cancelButtonText: string;
}
export interface NotificationOption {
  returnUrl: string;
  failureUrl: string;
  authHeader: string;
  cancelUrl: string;
  notifyByRedirect: boolean;
  notifyByPost: boolean;
  postAPI: string;
  mobileNumber: string;
  notifyBySMS: boolean;
}
export interface Preferences {
  eReceipt: boolean;
  avsVerification: boolean;
  customerName: string;
  customerEmail: string;
  customerMobile: string;
  integrationType: number;
 requestCardToken: boolean;
}

export interface PaymentSuccessResponse {
  information: string  // this will be the redirect url,
  message: string
}

export interface PaymentFailureResponse {
  errors?: (ErrorsEntity)[] | null;
}
export interface ErrorsEntity {
  field: string;
  message: string;
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  generatedTpn: string = ''
  generatedToken: string = ''
  routeUrl: string = 'Your Route Url Here'
  paymentUrl: string = 'Your Route URL'

  // All the urls should be trimmed. No trailing and leading white spaces 

  payload: Payload = {
    merchantAuthentication: {
      merchantId: this.generatedTpn,
      transactionReferenceId: Math.random().toString(36).slice(2)
    },
    transactionRequest: {
      transactionType: 1,
      amount: 100, // Amount (eg : 100 = 1$)
      calculateFee: true,
      invoiceNumber: ""
    },
    personalization: {
      logo: "https://www.example.com/image/img.jpg",  // Logo image url
      themeColor: "#80DEEA",
      description: "Your Description Here",
      payNowButtonText: "Pay Now",
      buttonColor: "#80DEEA",
      cancelButtonText: "Reset"
    },
    notificationOption: {
      returnUrl: this.routeUrl,
      failureUrl: "",
      authHeader: "",
      cancelUrl: "",
      notifyByRedirect: true,
      notifyByPost: false,
      postAPI: "",
      mobileNumber: "",
      notifyBySMS: false
    },
    preferences: {
      eReceipt: false,
      avsVerification: true,
      customerName: "",
      customerEmail: "",
      customerMobile: "",
      integrationType: 1
      requestCardToken: true
    }
  }

  constructor(private httpClient: HttpClient) { }

  async ngOnInit() {

    try {
      const result = await this.getPaymentForm(this.payload) as PaymentSuccessResponse
      const redirectUrl = result.information
      window.open(redirectUrl, '_self')
    }
    catch (err) {
      // handle error here
    }
  }

  getPaymentForm(payload: Payload) {
    const httpOptions = {
      headers: new HttpHeaders({ 'token': this.generatedToken, 'withCredentials': 'false' })
    };

    return new Promise((resolve, reject) => {
      this.httpClient.post(this.paymentUrl, payload, httpOptions).subscribe(
        (data: PaymentSuccessResponse | any) => {
          resolve(data)
        },
        (error: PaymentFailureResponse) => {
          reject(error)
        }
      )

    })
  }

}
}
PHP Sample:


{
<?php $curl = curl_init(); curl_setopt_array($curl, array( CURLOPT_URL => 'https://payment.ipospays.tech/api/v1/external-payment-transaction',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS =>' {
        "merchantAuthentication": {
            "merchantId": "",
            "transactionReferenceId": ""
        },
        "transactionRequest": {
            "transactionType": 1,
            "amount": "400",
            "calculateFee": true,
            "txReferenceTag1": {
                "tagLabel": "TEST",
                "tagValue": "TAG"
            },
            "txReferenceTag2": {
                "tagLabel": "TEST1",
                "tagValue": "TAG1"
            },
            "txReferenceTag3": {
                "tagLabel": "TEST2",
                "tagValue": "TAG2"
            }
        },
        "personalization": {
            "logoUrl": "",
            "themeColor": "",
            "description": "",
            "payNowButtonText": "",
            "buttonColor": "",
            "cancelButtonText": ""
        },
        "notificationOption": {
            "postAPI": "",
            "failureUrl": "",
            "returnUrl":"",
            "notifyByRedirect": false,
            "notifyBySMS": false,
            "notifyByPOST": false,
            "authHeader": "",
            "cancelUrl": "",
            "mobileNumber": ""
        },
        "preferences": {
            "integrationType": 1,
            "eReceipt": true,
            "avsVerification": true,
            "eReceiptInputPrompt": true,
            "customerName": "",
            "customerEmail": "",
            "customerMobile": ""
            "requestCardToken":true
        }
    }
',
  CURLOPT_HTTPHEADER => array(
    'token: ',
    'Content-Type: application/json'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

$reqjson = json_decode($response, true);
//header("Location:". $reqjson['information']);