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.
- 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
- 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.
- Enter the value of
snap_transaction_token
in Snap Token field. - Click Pay.
- Click HTML to see the source code.
Testing Payment
You can perform successful transaction by entering the card credentials given below.
Name | Value |
---|---|
Card Number | 4811 1111 1111 1114 |
CVV | 123 |
Exp Month | Any month in MM format. For example, 02 . |
Exp Year | Any future year, in YYYY format. For example, 2025 . |
OTP/3DS | 112233 |
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.
Updated 9 months ago