Design Your Payment Page - Juspay Studio

Juspay Studio is a DIY No-Code editor to build customized checkout experiences for your users. Juspay Studio enables you to add in different features like alternate payment methods, brand customizations, and change the order of payment methods on your Payment Page. Now you can create robust flows & improve payment success, all without any code. Follow the below steps

Try out our demo version here

A. How to use Juspay Studio to build your pixel‑perfect payments experience?

1. Open Express Checkout - Dashboard

2. Navigate to Juspay Studio from the Sidebar. 

3. That’s it! Now you can start using Studio’s configuration features to customize every element of your payments page.

B. Building your 1st payment page - Onboarding Journey

Our onboarding assistant lets you create your payment page by letting you choose from one of our templates. These templates are part of what we call foundations. Foundations define your brand's language, theme, or vibe as you may call. During the onboarding, you will be asked to make choices for the below.Note: Always save your design to avoid losing any progress.

You can access the Onboarding Journey from this URL

B.1 Layouts

Based on our experience creating payment pages across a wide range of merchants, we have distilled and figured out the most commonly used layouts. You can choose from one of these layouts to create the basic skeleton of how your payment page looks

Once you choose a layout for Previewing, you will see a screen with a full payment page where further basic customizations can be done. The main customizations are:

B.2 Color Palette

The colors that you would like to have on your payment page. This will include the colors for text, background color, primary color (color for your buttons and other key elements on your screen), error color and so on.

B.3 Font Family

Studio provides a library of fonts to choose from. You can also upload custom fonts as well that matches your app.

B.4 Icon Styles

Here you can change the style/theme of icons needed on your checkout page

1. Theme of Icons - Light & Dark 

2. Style - Without borders, with rounded borders or with squarical borders. 

3. Thickness - solid vs line family

4. Color

You can also upload your custom icons in later stages after landing in core Studio editor page

B.5 Order Summary

Order Summary/Amount Bar contains the order details and information related to the payments. You can choose from the available styles

B.6 Button Style

You can customize the style of button here. Stretched button vs Indented button styles are available, along with the roundness.

B.7 Body Layout

Choose a style that blends with your app’s overall layout and structure. The popular styles are
1. Stretched/Full width cards for each PO, with Payment Options opening in a new page
2. Boxed Cards for each PO, with Payment Options opening in a new page
3. Accordion view for each PO that expands on same screen
4. Combined/Grouped view where POs are grouped together in a single block

B.8 Toolbar/Appbar

Choose the alignment/positioning of the Page Header here

You can also preview other features (Quickpay, Native OTP) by clicking on the drop down on top right.

Once these are done, click on ‘Jump into Editor’ button to finish. Congratulations, you have now designed your first Payment Page. You’ll be taken inside core Studio Editor if you already have a dashboard account. If not, you will be required to create an account to log in to Studio.

C. Studio Guide

To use Juspay Studio,

1. Open Express Checkout - Dashboard

2. Navigate to Juspay Studio from the Sidebar. 

C.1 Studio MasterScreen

Masterscreen is the main landing page once you have selected Juspay Studio from the navbar of the dashboard. 

This screen lets you perform two main actions:

1. View/Update Design-
   Click this to design/customize your Payment Page. If you have done a self sign-up, you will be taken inside the core editor page of Studio. If not, you will be required to select your base template, font, icons & color palette before landing inside core editor

2. Track the ongoing Releases, check versions under Testing the versions that are Live.

C.2 Navigating inside Juspay Studio

The NavBar on the left side (see below image) lets you access the main modules inside Juspay Studio.  The different customizations are grouped under 3 main pillars:

1. Foundations - for general theming and styling of the payment page

2. Components - for specific customizations at a component level (eg: button, order summary etc)

3. Payment Options and Features - for enabling/disabling the required Payment Options as well as enabling disabling different features

We shall look at each of these in detail in the subsequent sections

C.3 Foundations (UI/UX)

Foundations dictate the general theming and styling of your Payment Page. The main customizations possible here are:

3. Typography/Fonts: Studio provides a library of fonts to choose from. You can also upload custom fonts as well.
   Fonts should be named in the format 

   fontname-fontweight.ttf. (Eg. Roboto-Regular.ttf)

4. Content: This is where you customize the language to be displayed on checkout. The main texts on the payment page are grouped at a page level  and can be customized as per your needs.

C.4 Components (UI/UX)

Components are the building blocks of your Payment Page. Components like Toolbar, Order Summary, Buttons/CTAs, Input Boxes, Lists, Grids, Search Boxes, Headers etc. make up your payment page. Curate these to seem like an extension of your app with just clicks. 

• App Bar/Toolbar: Toolbar of the app generally contains the heading/information about the page and navigation arrows

• List Items: This is the container which houses the different Payment Method Types.

• Section Header: These are the headers of different Payment Method sections on mobile view and page headers in desktop view

• Buttons: Primary (Payment) and Secondary (navigation/link etc.) CTAs used in the payment page

• Mobile Order Summary: Order Summary/Amount Bar contains the order details and information related to the payments

• Input Fields: These are text fields for inputs

• Search Box: Search boxes are available in certain screens to find relevant information (eg. to find banks in Netbanking Screens)

• Links: These function like buttons and initiate certain auxiliary flows other than payment (eg: linkwing wallet)

• Grid: These are an alternate way of housing Instruments  as opposed to lists and optimizes space by placing instruments next to each other (eg: UPI App grids)

• Container: These are the visual cards where different instruments are placed

• Offers: This is the offer section in the main payment page. It is possible to enable a banner also on home PP.

C.5 Customizing your Payment Methods

Enabling/Disabling Payment Method Types (PMT) can be done by switching to Options & Features under Payment Controls in the navigation panel. Options and features reveal 3 main levels of control: Payment Methods, Reorder & Features

1. Payment Methods: Here, you canEnable/Disable Payment Options by clicking on the toggle button next to each PMT on the right side panel. Eg: Enable/Disable Cards. Certain PMTs have further granular controls that are revealed on clicking the chevron icon. Eg: Cards -> Enable/Disable Card Mandates

Please note that the backend configurations must also be completed for the enabled PMTs to actually appear on Payment Page. You can also add further customization by creating Rules/Conditions on payment options. eg: Disable UPI payments for orders above 1 lakh Rupees. Rules/Conditions will be covered separately.

2. Reorder: As the name suggests, this section let’s you reorder the Payment Methods by drag & drop. Reordering can be done for 

1. Payment Methods

2. UPI Apps

3. Net Banking Banks

Refer the below videos on reordering PMTs:

The below video demonstrates reordering of UPI Apps. The process is similar for NB as well

3. Features:
   This section allows you to configure the Popular Features available on Payment Page.

C.6 Saving your Changes

The changes/experiments that you do on studio will be stored in your local and you can safely play around on Studio without accidentally rolling out any changes. Changes will be saved to cloud once you click on the Review and Save button on the top right of the screen. Once saved, these will be available to all users when they log in to Studio. Remember, you have currently created a DRAFT and these are still NOT rolled out to production.

The below image explains the lifecycle of every release. Rest assured, any changes you make will only be rolled out to users if you manually trigger a release and go through the steps mentioned below.

C.7 Checking android, ios preview on Studio

Studio by default renders an mweb preview. You can still check how your changes would look on a native app by selecting the ‘QR Option’ next to the preview and downloading the Preview app for android or ios. Install the app on any mobile and scan the QR code from phone to see the native view on Android or IOS. Any changes you make on studio would reflect realtime using the Preview app.

Note: Please try scanning a couple of times if the payment page is not rendered properly in the first run.

C.8 Testing in Closed User Group (CUG)

This is the testing phase where any changes can be tested in a controlled environment within a closed group of users.

Steps to conduct testing in CUG:
Click on ‘Create Ticket’ icon on top right

A release ticket will be created and needs to be reviewed &  approved by Juspay. (If you are still in the INTEGRATING phase, your changes will be auto approved).

Once approved by Juspay, you will be required to manually Push the changes to the CUG testing phase and select the platforms. You can push to CUG by clicking on the Create Ticket button once again and selecting the platforms in the below screen.

These changes can now be tested on CUG. For detailed instructions on CUG testing for different platforms, go to MasterScreen and click on the Card under CUG testing header for the relevant platform and follow the instructions.

eg: clicking on android card on the above image and clicking ‘steps for CUG’ opens up the instructions for android as follows. Likewise for other platforms.

C.9 Releasing & Rolling out to Production app

Once pushed to CUG, you can monitor the different CUGs from Studio Masterscreen. Once tested and changes are verified, a release can now be initiated by clicking on the CUG Card and selecting the ‘Proceed to Rollout’ CTA from the pop-up

C.10 Searching for Payment Option/ Feature toggles in Studio

You can access the help icon on the Top right and select from the listed PMT, Features for help with enabling/disabling any PMT or feature. Clicking here would automatically open up the relevant configuration on Studio as applicable to you. Refer the following video.