• Getting Started
    • Mobile Integration (Android/IOS)
      Enterprise Solutions
      Accept Payments
      Process Payments
      Disbursals
      API References
      Webhooks
      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.
      Customisation

      Setting up preferences and theme customisation

      1. Login to the Dashboard (UMP Panel) and click on Blink Checkout.
      2. If you're visiting for the first time, an overview page with details of Blink Checkout 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.

      The JS Snippet, if generated (for first time integration), will be in the following format:

      <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 and completes the payment.

      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.

      We would also recommend you to read about the following to ensure a smooth checkout process:

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