Frontend integration goal is to show Snap payment page within your site.

Include snap.js into your page so snap module is available. Don't forget to put your CLIENT-KEY as value of data-client-key attribute in snap.js script tag. You can see your CLIENT-KEY on Settings - Access Keys.

You can start payment process by calling snap.pay with SNAP_TOKEN acquired from backend integration as parameter.

Snap.js location

Production: https://app.midtrans.com/snap/snap.js

Sandbox: https://app.sandbox.midtrans.com/snap/snap.js

Viewport Meta Tag

To ensure that Snap popup modal is displayed correctly on a mobile device, please include the viewport meta tag inside your <head> element.

The most common implementation is the line of code below:

<meta name="viewport" content="width=device-width, initial-scale=1">

There is an alternative technique to load snap UI page instead of calling snap.js, this method called Window Redirection]

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript"
            src="https://app.sandbox.midtrans.com/snap/snap.js"
            data-client-key="<CLIENT-KEY>"></script>
  </head>
  <body>
    <button id="pay-button">Pay!</button>
    <script type="text/javascript">
      var payButton = document.getElementById('pay-button');
      payButton.addEventListener('click', function () {
        snap.pay('<SNAP_TOKEN>');
      });
    </script>
  </body>
</html>

Demo