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>