--- page_source: https://juspay.io/in/docs/payment-method-integrations/express-checkout-api/loyltyrewardz/frontend-designs page_title: Front-End Designs --- # User Flows ### Flow 1 Saved Card Flow If a user has made a Successful Card Transaction earlier on the merchant app, and if they have opted to “Securely save the card for future Payments” then user would be seeing that particular card as a pre-saved payment instrument in all further transactions for this merchant. ### Flow 2 New Card Flow If a user is attempting to initiate a transaction on the merchant app with a new (previously unsaved) card. ## User Journey ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(2)-LtVWv.png) *Saved Card Flow | Fetch Balance* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(3)-i1Mpz.png) *Saved Card Flow | Split Transaction* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(4)-ULp4M.png) *Saved Card Flow | Full Redemption* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(5)-LS1WR.png) *No Rewards* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(6)-lf1Ox.png) *New Card Flow | Eligibility* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(7)-0phoP.png) *New Card Flow | Fetch Balance* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/payment-method-integrations/Untitled%20presentation%20(8)-bjzHz.png) *New Card Flow | Split Transaction* ## **Sample Requests and Responses** With the existing implementation on Juspay , the transaction level details are available in the root structure of the orderStatus(`/orders/:order_id`) JSON block. > **Note** > * In some case, There will be a new status called as **AUTO_REFUNDED** , which indicates than primary card transaction is successful but the LOYLTYREWARDZ transaction got failed and JUSPAY has called REFUND for primary card transaction. > * Only inCase of split transactions, orderStatus response will return `txn_list` as an array block in with the 2 transactions (CARD + LOYLTYREWARDZ). You need to make sure to consume the params from inside the `txn_list` array block. > * As orderStatus response is changing incase of split transaction and **AUTO_REFUNDED** case, It will also effect webhook payload (If already handled no need for any change). #### Order Status API **Request** #### Shell Code Snippet: ```shell curl --location 'https://api.juspay.in/ecr/orders/ \ --header 'Authorization: Basic Auth' --header 'Version: 2024-01-01' ``` **Response** Reward Transaction #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` Card + Reward Transaction #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` #### **Refund API** ### Refund cases Substep 1. Refund requests (full/partial) can be initiated by a Juspay’s merchant at Transaction level or at Order level. 2. Given that LOYLTYREWARDZ transactions can be split between an existing Gateway and LOYLTYREWARDZ, the merchant can choose between one of the two provisions - 3. For Order based refunds,  a. merchant will have to pass `order_id` & `amount` (refund amount) to Juspay. b. Order may have 2 transactions (Card and LOYLTYREWARDZ), Juspay will try to prioritise card transaction for refund and if the refund amount is greater than card transaction amount then JUSPAY will initiate refund call to LOYLTYREWARDZ c. Merchant will receive Juspay’s refund response accordingly (post PG processing) and is expected to handle the same (new key “split_refund_details”) 4. For Transaction based refunds a. merchant would initiate refunds against all transaction Ids, with transaction Id and amount to Juspay b. Merchant will ensure the amount checks and the refund split for both full and partial refunds. c. Juspay’s refund response will remain the same as what merchants currently see for transaction based refunds. No additional handling required. **Transaction Base Refund** Request #### Shell Code Snippet: ```shell curl --location 'https://api.juspay.in/orders/txns//refunds' \ --header 'Accept: application/json' \ --header 'version: 2022-03-16' \ --header 'x-merchantid:' \ --header 'Authorization: Basic Auth' \ --header 'Content-Type: application/x-www-form-urlencoded' \ --data-urlencode 'unique_request_id=req-1695671557' \ --data-urlencode 'amount=998' ``` Response #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` #### Order Base Refund Request #### Shell Code Snippet: ```shell curl --location 'https://api.juspay.in/orders/{order_id}/refunds' \ --header 'Content-Type: application/x-www-form-urlencoded' \ --header 'Authorization: Basic \ --data-urlencode 'unique_request_id=URI_1696429607' \ --data-urlencode 'amount=950' ``` Response #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ```