Create AccountSubmit FeedbackAI Assist (BETA)

Overview

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