Interactive Demo

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

2. 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.

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.