Snap PHP Integration Using Wizard (or Setup Assistant)

Introduction

This Snap PHP integration is going to be assisted by Devsupport AI. There are 3 main steps to complete:

  1. Preparation
  2. Integration using Devsupport AI
  3. Notification Handling

Preparation

Before proceeding any further, please make sure that you have followed the Getting Started - Preparation guide. Please also have your Access Keys (Client Key and Server Key) readily available.

You can find your Access Keys in the Merchant Administration Portal (MAP) at Settings > Access Keys. Please follow this link to find your access key.

Integration using Devsupport AI

Please follow the following steps for integration using Devsupport AI:

  1. Download the Devsupport AI app. Please choose the file according to your system:
    • Windows : devsupport-ai-setup-[x.x.x].exe
    • Mac : devsupport-ai-[x.x.x]-mac.zip (extract zip first, then open the app.)
    • Linux : devsupport-ai_[x.x.x]_amd64.deb
  2. Install and open the App, you should see a screen below: App Screen

  3. Create a folder on your computer and create an index.php or index.html file in the folder.
  4. Drop the folder in the app as instructed on the Devsupport AI app.
  5. Type/Search for "Midtrans" when asked for the product you would like to integrate
  6. Click on "Midtrans PHP Snap Integration"
  7. Enter your Sandbox Client Key and Server Key then Proceed. If you enter wrong key combination, the app will let you know the keys are incorrect.
  8. The app will then give you 3 files, all of which have your credentials set.
    • Veritrans.php
    • checkout.php
    • handle_notification.php
  9. Host them on your server and keep their URLs ready.
  10. The app will also provide you an HTML tag for you to initiate a payment. The tag looks like the following:

    <button id="pay-button">Pay!</button>
    <!-- TODO: Remove ".sandbox" from script src URL for production environment. Also input your client key in "data-client-key" -->
    <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="[YOUR_CLIENT_KEY]"></script>
    <script type="text/javascript">
      document.getElementById('pay-button').onclick = function(){
    // This is minimal request body as example.
    // Please refer to docs for all available options: 
    // https://snap-docs.midtrans.com/#json-parameter-request-body
    // TODO: you should change this gross_amount and order_id to your desire. 
    var requestBody = 
    {
      transaction_details: {
        gross_amount: 123000,
        // as example we use timestamp as order ID
        order_id: 'T-'+Math.round((new Date()).getTime() / 1000) 
      },  
      credit_card: {
        secure: true
      }
    }
    
    getSnapToken(requestBody, function(response){
      var response = JSON.parse(response);
      snap.pay(response.token);
    })
      };
      /**
      * Send AJAX POST request to checkout.php, then call callback with the API response
      * @param {object} requestBody: request body to be sent to SNAP API
      * @param {function} callback: callback function to pass the response
      */
      function getSnapToken(requestBody, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        callback(xmlHttp.responseText);
      }
    }
    xmlHttp.open("post", "[YOUR_CHECKOUT.PHP_URL]");
    xmlHttp.send(JSON.stringify(requestBody));
      }
    </script>
    
  11. If everything went smoothly, you can test the payment page by clicking the pay button. The Snap payment page will look like the following:

    snap

Notification Handling

Please ensure that all notifications are handled properly in the handle_notification.php file. Please refer to the Handling HTTP(S) Notification documentation page for more details.

References

For more details about PHP Snap integration, please refer to our step-by-step integration guide.

Let Us Know Your Thoughts

Is our wizard (or setup assistant, using Devsupport AI) helpful? Do you have any feedback? Please share your feedback here.