Razorpay API Request Error - Emojis Causing Internal Server Error (500) and Bad Request (400)

Question

I'm encountering an issue with Razorpay API requests in my web application. When emojis are included in the API request data, I'm receiving "Internal Server Error (500)" and "Bad Request (400)" responses from Razorpay.

I suspect that the emojis in the data are causing the problem, as the error message suggests. However, I'm not sure how to handle this issue effectively.

I am getting a 500 Internal Server Error when I send emojis in my API request. The error message says: This error occurs when emojis are sent in the API request. We are facing some trouble completing your request at the moment. Please try again shortly. Check the API request for emojis and resend.

These errors are print in the browser console

1} checkout.js:1 Unrecognized feature: 'otp-credentials'.

2} GET https://browser.sentry-cdn.com/7.64.0/bundle.min.js net::ERR_BLOCKED_BY_CLIENT

3} Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

4} checkout.js:1 
POST https://lumberjack-cx.razorpay.com/beacon/v1/batch?writeKey=2Fle0rY1hHoLCMetOdzYFs1RIJF net::ERR_BLOCKED_BY_CLIENT

5} checkout-frame.modern.js:1 Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".

6} checkout-frame.modern.js:1 
POST https://api.razorpay.com/v1/standard_checkout/payments/create/ajax?session_token=1195957E22CEDC68FA41546EAFCB32822446AFCE189C65DEEA3D65FD8A5954842A4CC50914376849E37749EDAC80962106F2D99A99F0DAA2D1745E12FEBA19FEF4AC340FEC0AF9C18340A00E7828A099572C469DAF2518EA61D0369B75A7AEAF8BF61EEE979B536EF040F8E777EDFE695FEF10951EE8EA0B49E9DED09695E32582159FA5A03EE334DD16116CC22B759BB98C 500 (Internal Server Error)

I'm using Razorpay for payment processing, and I have both JavaScript and Python code involved. Here's a simplified overview of my code:

HTML/JavaScript (Frontend):

 <script src="https://js.stripe.com/v3/"></script>
 <script src="https://checkout.razorpay.com/v2/checkout.js"></script>

  <script>
  var options = {
          "key": "{{ API_KEY }}",
           "amount": "{{ actual_price_fee_added }} * 100",  
           "currency": "INR",
           "name": "FMP",
           "description": "Test Transaction",
           "image": "",
           "order_id": "{{ order_id }}",
           "handler": function (response) {
           //alert("Payment successful");
          var successUrl = document.getElementById('payment-form').elements["success_url"].value;
          window.location.href = successUrl;
          },
          "prefill": {
               "name": "{{ user.username }}",
               "email": "{{ user.email }}",
               "contact": "{{ user.phone }}"
           },
           "notes": {
              "address": "Razorpay Corporate Office"
           },
           "theme": {
               "color": "#3399cc"
                     }
               };
                                
           var rzp1 = new Razorpay(options);
           rzp1.on('payment.failed', function (response) {
                     alert("Payment failed");
          });
                                
          document.getElementById('rzp-button1').onclick = function (e) {
           rzp1.open();
         e.preventDefault();
          }
        </script>

Python (Backend):

# Razorpay order creation
data = {
  "amount": price * 100,
  "currency": "INR",
  "receipt": "order_rcptid_11"
}

payment = client.order.create(data=data)
API_KEY = settings.REZORPAY_PUBLISHABLE_KEY

My question is, how can I handle the emojis in the API request data to prevent these errors? Should I sanitize the data to remove emojis, and if so, what's the best approach to do that?

I'd appreciate any guidance or code examples on how to handle this issue effectively.