This section details about the display configuration.

Using the display config, you can put together all the modules, that is, blocks, sequence, preferences, hide instruments as shown below:

The display config can be passed in the Checkout options.

 display config JavaScript Checkout options
Copylet config = {
  display: {
    blocks: {
      code: {
        name: "The name of the block", // The title of the block
        instruments: [instrument, instrument] // The list of instruments
      },

      anotherCode: {
        name: "Another block",
        instruments: [instrument]
      }
    },

    hide: [
      {
        method: "method"
      }
    ],

    sequence: ["block.code"], // The sequence in which blocks and methods should be shown

    preferences: {
      show_default_blocks: true // Should Checkout show its default blocks?
    }
  }
};
Copy// beginning of the Checkout code
.....

let options = {
  key: "[YOUR_KEY_ID]",
  amount: 60000,
  currency: "INR",

  config: {
    display: {
      // The display config
    }
  }
};

let razorpay = new Razorpay(options);

razorpay.open();
....
//rest of the Checkout code

Orders API Sample Code

Know more about Orders API.