Interactive Demo

Interactive Demonstration of Snap Integration

Step 1 and Step 2 in Snap Integration Overview are explained here using interactive demonstration. You can also observe the source code and see the real-time output by trying the Snap integration demo below.



Requirements


Midtrans Account and API keys will be used in this integration, but we will be using a predefined demo keys.




Specifications


  • Backend: This demo is using NodeJS (hosted on CodeSandbox) for simplicity, but you can use any backend language.
  • Frontend: HTML and JavaScript.



Usage Explanation


You will observe the basic implementation flow of creating payment page via Snap API.

  1. Click Proceed to Payment to test the frontend.

📘

Note

Please wait until the window/iframe below is fully loaded. It may take some time while it tries to build the backend.


CodeSandbox demo Midtrans NodeJS


  1. Click Open Sandbox to view and edit the full source code. You can modify with the sample code or copy it as a reference to your local machine.

Alternative Frontend Integration Sample
A sample frontend integration, hosted on JSFiddle is shown below.

  1. Enter the value of snap_transaction_token in Snap Token field.
  2. Click Pay.
  3. Click HTML to see the source code.



Testing Payment


You can perform successful transaction by entering the card credentials given below.


NameValue
Card Number4811 1111 1111 1114
CVV123
Exp MonthAny month in MM format. For example, 02.
Exp YearAny future year, in YYYY format. For example, 2025.
OTP/3DS112233

For more test payment credentials, refer to Testing Payments on Sandbox.




Next Step


Get Your Own API Keys

Sign up for Midtrans account and retrieve your API keys. Follow the steps here.


Handling After-Payment Scenarios

Follow this guide after you have finished your integration to handle completed payments and implement advanced features.



Documentations