Integration Guide for Web Desktop & Mobile Browser

PreviousModal checkout NextMerchant checkout

Last updated 7 months ago

Integration Guide for Web Desktop & Mobile Browser

Step 1: Import tag <meta> for responsive
Step 2: Import tag <script> with src:
Step 3: Create tag <div> with id = galaxy-pay-sdk in your checkout page
Step 4: Create callback function to receive payment result. See 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 ).
- callback: The function to receive payment result.
- option: The payment option (JSON object)

Example:

<!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>

PreviousModal checkout NextMerchant checkout

Last updated 7 months ago