Step 1 and Step 2 in Snap Integration Overview is explained here using interactive demonstration. You can try the Snap integration demo given below. You can also observe the source code and see the real-time output.
Midtrans Account and API keys will be used in this integration, but we will be using a predefined demo keys.
- Backend: This demo is using NodeJS (hosted on CodeSandbox) for simplicity, but you can use any backend language.
- Frontend: HTML and JavaScript.
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.
?>Note: In real-case scenario, the token_id
may not be displayed to the customer. In the example shown, the token_id
string is displayed to make it easy to understand the basic integration.
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.
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.
Sign up for Midtrans account and retrieve your API keys.
This was a simplified demonstration of Step 1 and Step 2 on Snap Integration Guide. Please follow the next steps given in the Snap Integration Guide to proceed with the complete integration.