• Getting Started
    • Mobile Integration (Android/IOS)
      Enterprise Solutions
      Retail Solutions
      Accept Payments
      Process Payments
      Disbursals
      API References
      Testing
      Refunds
      Guides
      Other Processes
      Mini Program Platform
        Website Integration

      Blink Checkout - Amazingly Fast Checkout Solution

      Blink Checkout is a solution for businesses who would like to collect payment on their platform with minimal coding. What else? This solution enables a high level of customisation for the merchant, no redirection to bank pages and enhanced merchant visibility. All of this by simply integrating a couple of lines of code snippet, prepared by Paytm exclusively for you. Integrate and start accepting payments within an hour.

      With this solution, you'll be able to:

      • Start accepting payments within minutes by integrating a few lines of code snippet, prepared by Paytm.
      • Design the payments screen as per your theme - adjust header, background and text colour.
      • Improve success rate by removing redirection altogether - complete payment on your own page.
      • Enhance business visibility - display your logo on payment's page.
      • Control paymode sequencing - want to promote Debit Card over Net Banking transactions on your page? Blink Checkout solution gives you the option to do so.
      Demo

      Demo of Blink Checkout


      Blink Checkout Demo
      Overview

      Overview of complete process to customise the checkout flow,
      integrate the solution and accept payment


      Note:
      • Integrating Initiate Transaction API is mandatory for the merchant to consume this solution.
      • In case of third party webviews (if you are posting/promoting your website on social media platforms like Facebook, Twitter, LinkedIn etc) the callback URL in Initiate Transaction API is a mandatory parameter. Once the transaction is completed, Paytm will post the response on this callback URL
      Customisation

      Setting up preferences and theme customisation

      1. Login to the Merchant Dashboard (UMP Panel) and click on Blink Checkout. Alternatively, you can also directly integrate the JS Code snippet shared below and validate the integration and do customizations later.
      2. If you're visiting Blink Checkout on the Merchant Dashboard for the first time, an overview page with details will open to assist you in understanding the solution. This page also has a video, taking you through the entire journey.
        1. If you're revisiting the section, you’ll be directly taken to the theme customisation page.
      3. Select among multiple options to customise the payments page. Some available enhancements are:
        1. Color of Header Panel and Header Text
        2. Color of Pay Button and Pay Button Text
        3. Background colour and Text
        4. Sort paymodes
        5. Enable / Disable Paytm's branding
      4. Submit your changes
        1. In case you're integrating the solution for the first time, click on the button - 'Generate JS Code', copy the code generated and paste it in the <body> tag of your HTML page.
        2. If you've already integrated this solution previously and have made some modifications, you just need to save your settings. You do not need to generate the JS again and do the integration.
      Note: You'll be able to test or integrate the feature only if you're registered as a merchant with Paytm.

      JS Code Snippet

      <script type="application/javascript" crossorigin="anonymous" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js" onload="onScriptLoad();"> </script>
      <script>
        function onScriptLoad(){
            var config = {
              "root": "",
              "flow": "DEFAULT",
              "data": {
              "orderId": "", /* update order id */
              "token": "", /* update token value */
              "tokenType": "TXN_TOKEN",
              "amount": "" /* update amount */
              },
              "handler": {
                "notifyMerchant": function(eventName,data){
                  console.log("notifyMerchant handler function called");
                  console.log("eventName => ",eventName);
                  console.log("data => ",data);
                } 
              }
            };
      
            if(window.Paytm && window.Paytm.CheckoutJS){
                window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
                    // initialze configuration using init method 
                    window.Paytm.CheckoutJS.init(config).then(function onSuccess() {
                        // after successfully updating configuration, invoke Blink Checkout
                        window.Paytm.CheckoutJS.invoke();
                    }).catch(function onError(error){
                        console.log("error => ",error);
                    });
                });
            } 
        }
      </script>

      Host:


      MID:

      Testing MID can be fetched from the API Keys section of the Merchant Dashboard. Production MID is generated by Paytm post successful activation of your account and can be fetched from the same dashboard.


      flowchart

      Accepting Payments

      Accepting payments after setting preferences

      1. When the user loads the cart page, the merchant creates an order at their backend and calls Initiate Transaction API.
      2. Paytm receives this request and returns a response containing transaction token (TXN_TOKEN) to the merchant.
      3. The merchant uses the transaction token, along with other parameters to initialise JS module. The other parameters required are:
        1. orderID
        2. transactionAmount
        3. tokenType
        4. token
      4. Merchant invokes the JS module.
      5. JS module renders the cashier page on the browser, preset with the configurations received.
      6. User selects his preferred payment instrument.
      7. Customer fills the payment details and is redirected to bank page for authorization. Once the transaction is authorized, Paytm receives the response from the bank and returns a status to your website via your callback URL. Response attributes description and sample HTML form post is provided below
        Response Attributes
        MID String(20)This is a unique identifier provided to every merchant by Paytm
        TXNID String(64)This is a unique Paytm transaction ID that is issued by Paytm for each transaction
        ORDERID String(50)Unique reference ID for a transaction which is generated by merchant and sent in the request
        BANKTXNID StringThe transaction ID sent by the bank. In case of Paytm proprietary instruments too, there is unique reference number generated by Paytm's system. In case the transaction does not reach the bank, this will be NULL or empty string. Primary reason for this is user dropping out of the payment flow before the transaction reaches to bank servers.
        TXNAMOUNT String(10)Amount paid by customer in INR
        CURRENCY String(3)Currency in which the transaction has taken place. Currently only "INR" is the supported currency of transaction
        STATUS String(20)This contains the transaction status and has only three values: TXN_SUCCESS, TXN_FAILURE and PENDING
        RESPCODE String(10)Codes refer to a particular reason of payment failure/success. List in this PDF
        RESPMSG String(500)Description message is linked with each respcode. List in this PDF
        TXNDATE DateTimeDate and Time of transaction in the format "yyyy-MM-dd HH:mm:ss.S" Example: "2015-11- 02 11:40:46.0"
        GATEWAYNAME String(15)Gateway used by Paytm to process the transactions. Details are provided below paymode wise
        Credit, debit cards UPI - Gateway used to process the transaction. For example, if HDFC gateway has been used to process SBI credit card transactions, the value will be HDFC
        Net banking - Netbanking transactions are not routed via gateway. Hence issuing bank name is passed in this field
        Paytm Wallet - The value will be 'WALLET'
        Paytm Postpaid - The value will be 'PAYTMCC'
        BANKNAME String(500)Name of issuing bank of the payment instrument used by customer. Details are provided below paymode wise
        Credit, debit cards, net banking - Name of the issuing bank. Example in case customer uses SBI's credit card, the value will be "SBI"
        Paytm Wallet - Wallet
        Note that in case of UPI - This parameter will not be present in the response.
        PAYMENTMODE String(15)The payment mode used by customer for transaction
        Credit card - CC
        Debit card - DC
        Net banking - NB
        UPI - UPI
        Paytm wallet - PPI
        Postpaid - PAYTMCC
        CHECKSUMHASH String(108)Security parameter to avoid tampering. Verified using server side checksum utility provided by Paytm.
      8. Checksumhash received in response of transaction needs to be verified on merchant server using Paytm library with all the parameters in key value pairs. Code snippets and Github links for the checksum utility are provided here
        String paytmChecksum = null;
        /* Create a TreeMap from the parameters received in POST */ TreeMap<String, String> paytmParams = new TreeMap<String, String>(); for (Entry<String, String[]> requestParamsEntry : request.getParameterMap().entrySet()) { if ("CHECKSUMHASH".equalsIgnoreCase(requestParamsEntry.getKey())){ paytmChecksum = requestParamsEntry.getValue()[0]; } else { paytmParams.put(requestParamsEntry.getKey(), requestParamsEntry.getValue()[0]); } }
        /** * Verify checksum * Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys */ boolean isValidChecksum = CheckSumServiceHelper.getCheckSumServiceHelper().verifycheckSum("YOUR_KEY_HERE", paytmParams, paytmChecksum); if (isValidChecksum) { System.out.append("Checksum Matched"); } else { System.out.append("Checksum Mismatched"); }
      9. Validate transaction response via server side request using Transaction Status API. This API requires checksumhash in request and its verification in response. The status should be treated as the final status of the transaction

      Transaction Token Flow Chart
      Note: All the user sensitive information like card details, account details etc is fetched from the merchant's page using an iFrame rendered by Paytm. This way, all the information entered by the user remains safe and is securely transmitted to Paytm.

      For enhanced configurations, you may visit our API Documentation.

      Testing the Blink Checkout integration


      Once the integration is complete, you may test it using the staging credentials available at API Keys section of the Merchant Dashboard and using the test paymode credentials listed here.

      Once the test transaction is complete, move your code to live environment with production account details. Note that production accounts details are available after you have activated your account on the dashboard

      We would also recommend you to read about Refund Management.

      In case of any issues with integration, please get in touch.