Development

​

Payment Popup

​

1. Include Paytring Iframe JavaScript Library

<script src="https://cdn.paytring.com/js/checkout/iframe.v1.2.0.js"></script> 

​

2. Creating an Order

// Define a function to be executed if the transaction fails
async function fail_handle(order_id) {
    // This function executes if the transaction fails
    // You will receive the order id as an argument
    // You can use the Fetch API to check order details
}

// Define a function to be executed if the transaction is successful
async function success_handle(order_id) {
    // This function executes if the transaction is successful
    // You will receive the order id as an argument
    // You can use the Fetch API to check order details
}

// Define a function to log events
async function event_happen(resp) {
    console.log("Event Name: " + resp.event_name);
    console.log("Event Value: " + resp.event_value);
}

// Define a function to handle popup closure
async function on_close(order_id) {
    // This function executes if the popup is closed
    // You will receive the order id as an argument
    // You can use the Fetch API to check order details
}

// Define options for the Paytring Iframe
var options = {
    "order_id": response.order_id, // Replace with the order id you received when creating the order
    "success": success_handle,
    "failed": fail_handle,
    "events": event_happen, // Executes on various events, such as payment option selection or proceeding with payment
    "onClose": on_close
    // optional parameters
    "zIndex": 99999 // optional parameter to set z-index of the iframe
};

// Create an instance of the Paytring class with the specified options
const paytring = new Paytring(options);

// Open the Paytring Iframe
paytring.open();

​

Explanation

1. fail_handle Function:
   • This function is a callback that will be executed if the transaction fails.
   • It receives the order_id as an argument, allowing you to handle and log information about failed transactions.
   • You can use the Fetch API or other methods to check and retrieve details about the failed order.
2. success_handle Function:
   • This function is a callback that will be executed if the transaction is successful.
   • Similar to fail_handle, it receives the order_id as an argument.
   • You can use the Fetch API or other methods to check and retrieve details about the successful order.
3. event_happen Function:
   • This function is a callback that logs events related to the Paytring Iframe.
   • It logs the event name and event value to the console.
   • The function is intended to be used for debugging and monitoring purposes.
4. on_close Function:
   • This function is a callback that will be executed if the popup is closed for any reason.
   • Similar to other callback functions, it receives the order_id as an argument.
   • You can use the Fetch API or other methods to check and retrieve details about the order.
5. options Object:
   • An object that holds various options for configuring the Paytring Iframe.
   • It includes the order_id received when creating the order, success and failed callback functions, and an events callback for logging events.
   • The order_id is mandatory, while the other parameters (success, failed, and events) are optional.
6. Paytring Instance:
   • Creates an instance of the Paytring class with the specified options.
7. Open Iframe:
   • The open() method is called on the Paytring instance, which opens the Paytring Iframe for the user to complete the payment.
   • Ensure that you replace response.order_id with the actual order id obtained from your order creation process. The provided callbacks (fail_handle, success_handle, and event_happen) allow you to customize how your application handles different aspects of the payment process.

​

3. Handling Events

​

Event Handling Example

• Failed Event
  document.addEventListener("payment.failed", (e) => {
      // This code block executes when the payment transaction fails
      console.log("Payment Failed order id:", e.detail.order_id);
  });
  
• Success Event
  document.addEventListener("payment.success", (e) => {
      // This code block executes when the payment transaction is successful
      // You can add your custom logic here
      console.log("Payment Successful order id:", e.detail.order_id);
  });
  
• Close Event
  document.addEventListener("payment.close", (e) => {
      // This event is triggered when the user closes the iframe before completing the transaction
      console.log("Iframe closed for order id:", e.detail.order_id);
  });
  

var options = {
    "order_id": response.order_id, // Replace with the order id you received when creating the order
};

const paytring = new Paytring(options);
// Open Iframe
paytring.open();

​

Payment Callback Request

​

Payment Webhook Request

{
    "key": "test_123",
    "receipt_id": "HYD2245637",
    "hash": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}