---
page_source: https://juspay.io/in/docs/payment-method-integrations/express-checkout-api/upiinapp-integration/changes-for-payment-page-merchant
page_title: Changes for Payment Page Merchant
---


# **Changes for Payment Page Merchant** 




## UPI-In-App Flow :



![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Screenshot%202023-10-03%20at%203.31.48%20PM.png)
*#1*



![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Screenshot%202023-10-03%20at%203.31.57%20PM-w6cO8.png)
*#2*




## UPI-In-App changes :



When initializing the payment page, the Hyper Widget seamlessly triggers internal calls to Hyper-UPI, requiring only minimal modifications. The following outlines the necessary adjustments :


### #1 SDK Changes (Only for Sandbox) :


1. **Add secure component:**

Include the secure component dependency in your application build.gradle under dependencies section.


#### Java Code Snippet:

```java
dependencies {
    implementation'in.juspay:secure-component-uat:2.1.8'
}
```


2. **Add configurations block:**

Add the following block below the dependencies section in application build.gradle.


#### Java Code Snippet:

```java
configurations.all {
    exclude(group:'in.juspay',module:'secure-component-prod')
}
```





### #2 Addition of issuingPsp in initiate payload :


This can be handled by Juspay itself if only one issuingPsp is required. **Sample Request/Response Payloads:** 


#### Request Payload Code Snippet:

```request payload
{
  "requestId": "8cbc3fad-8b3f-40c0-ae93-2d7e75a8624a",
  "service": "in.juspay.hyperpay",
  "payload": {
    "action": "initiate",
    "merchantKeyId": "<Merchant Key Id>",
    "clientId": "<Client Id>",
    "signature": "<Generated signature for signature payload>",
    "signaturePayload": "<Stringified signature payload>",
    "environment": "sandbox",
    "issuingPsp": "YES_BIZ",  // VALUES CAN BE AXIS_BIZ OR BHIM AS PER THE PLUGIN INTEGRATION
    "shouldCreateCustomer": true,
    "logLevel": 1
  }
}

//Sample Signature Payload//
"signaturePayload": {
  "merchant_id": "stock",
  "customer_id": "abcde12345",
  "timestamp": "1668389349848"
}

```

#### Response Payload Code Snippet:

```response payload
{
  "requestId": "<request id passed>",
  "service": "in.juspay.hyperpay",
  "payload": {
    "action": "initiate",
    "status": "SUCCESS/FAILURE"
  },
  "error": false,
  "errorMessage": "",
  "errorCode": "",
  "event": "process_result"
}

```





### **UPI-in-app Management :** 



Management flow integration is required for all UPI related settings such as account management, transaction history, queries, delink etc. This is mandatory to have as per NPCI guidelines to provide complete control for the end user. 

![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Screenshot%202023-10-03%20at%203.44.20%20PM-qxFf6.png)
*Management Flow*




### #3 Changes required for Management Flow :


Process call with new action is required to invoke this flow. Once invoked, Juspay SDK would handle the rest. 

**Sample Request/Response Payloads:** 


#### Request Payload Code Snippet:

```request payload
{
  "requestId": "19d7fa5f-24b9-4864-a659-147ca57918b4",
  "service": "in.juspay.hyperapi",
  "payload": {
    "action": "management",
    "merchantKeyId": "<Merchant Key Id>",
    "signature": "<Generated signature for signature payload>",
    "signaturePayload": "<Stringified signature payload used for signature generation>"
  }
}

//Sample Signature Payload//
"signaturePayload": {
  "merchant_id": "stock",
  "customer_id": "abcde12345",
  "timestamp": "1668389349848"
}

```

#### Response Payload Code Snippet:

```response payload
{
  "requestId": "19d7fa5f-24b9-4864-a659-147ca57918b4",
  "service": "in.juspay.hyperapi",
  "payload": {
    "action": "management",
    "status": "SUCCESS"
  },
  "error": false,
  "errorMessage": "",
  "errorCode": "",
  "event": "process_result"
}

```





### #4 Enabling the flow on Studio :


UPI-In-App needs to toggled via studio interface 




## Additional Features :




### **#1 - CRED powered offers** 



CRED will be providing offers for upi-in-app transactions via Juspay where users will be shown & allotted offers when transacted using this payment method. 

![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Screenshot%202023-10-03%20at%203.50.22%20PM.png)
*CRED Offers*



How to enable ? 

1. Fetch credentials from CRED and update on Juspay Dashboard
2. Enable CRED offer on upi-in-app on Studio


### 




### **#2 - UPI-in-app on quickpay for an even faster payment experience** 



![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Screenshot%202023-10-03%20at%203.48.11%20PM.png)
*Quickpay*



//