> For the complete documentation index, see [llms.txt](https://docs.galaxypay.vn/upc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.galaxypay.vn/upc/payment-gateway/payment-solution/modal-checkout/integration-guide-for-web-desktop-and-mobile-browser.md).

# Integration Guide for Web Desktop & Mobile Browser

* Step 1: Import tag \<meta> for responsive
* Step 2: Import tag \<script> with src: <https://uat-stc.galaxypay.vn/scripts/script-modal.js>
* Step 3: Create tag \<div> with id = galaxy-pay-sdk in your checkout page
* Step 4: Create callback function to receive payment result. See  [Result & IPN Callback](/upc/payment-gateway/api-specification/ipn-and-callback/result-and-ipn-callback.md) for detail.
* Step 5: Create callback function to close modal chekout.
* Step 6: Call function galaxyPaySubmitPayment(endpoint, callback, option)
  * endpoint: Receive from API Checkout (see [API checkout](/upc/payment-gateway/api-specification/payment/checkout-for-modal-checkout.md)).
  * callback: The function to receive payment result.
  * option: The payment option (JSON object)&#x20;

**Example:**&#x20;

```html
<!DOCTYPE html>
<html>
  <!-- Responsive Support -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Import JS SDK -->
  <!-- version = Current Date with format YYYYMMDD -->
  <script src="https://uat-stc.galaxypay.vn/checkout/vietjet/script-modal.js?version=20230710"></script>
  <body>
    <button onclick="onPayment()">Payment</button>
    <!-- IFrame Container -->
    <div id="galaxy-pay-sdk"></div>
  </body>
</html>

<script>
  // Callback Function
  function callbackPaymentResult(resultData) {
    console.log(resultData);
  }

  // Callback Function close modal
  function callbackOnCloseModal() {
    console.log("====== close modal ======");
  }
  
  // Invoke Payment Function 
  function onPayment(){
    let endpoint = "https://uat-paymentv2.galaxypay.vn/checkout/2308145315460205670148885/20230814110027/2b72e3e8d594148cb4e22c987859bcd0660df7d5ce89638887dc274751557ed6";   // endpoint that is received from API checkout
    let option = {
        language: "en" // vi or en
    };

    // Call payment function from SDK
    galaxyPaySubmitPayment(endpoint, callbackPaymentResult, callbackOnCloseModal, option);
  }
</script>
```
