Get image from JSON response

Hello developers, 

I am developing payment method with QR scan. In the website, when the user click Pay button, the charges was created with API and as return I get JSON format which contains QR code image.

{
      "object": "barcode",
      "type": "qr",
      "image": {
        "object": "document",
        "livemode": false,
        "id": "docu_test_5koo0ws5uaizibbtav1",
        "deleted": false,
        "filename": "qrcode.png",
        "location": "/charges/chrg_test_5koo0wqlec02qjzw7b1/documents/docu_test_5koo0ws5uaizibbtav1",
        "download_uri": "https://api.omise.co/charges/chrg_test_5koo0wqlec02qjzw7b1/documents/docu_test_5koo0ws5uaizibbtav1/downloads/6F7B2EC4A2D3CFCA",
        "created_at": "2020-07-28T04:02:19Z"
      }

But I don't know how to retrieve the QR image. Please help.


With regards.

Hi Phone,

The JSON response is giving you all the details... why don't you pass the download_uri property value as the image widget URL property value


Implemented the same approach-- sample app 

Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Phone,

The JSON response is giving you all the details... why don't you pass the download_uri property value as the image widget URL property value


Implemented the same approach-- sample app 

Hope this helps you!


Regards,

Benjith Sam

 Thank you for your quick reply Benjith Sam, i've tried your approach as shown in image.

 But image is not displaying after ajax refresh. Where i am wrong? 

Thank you

Hi Phone,

My first implementation was in Reactive web and later I tried in the Traditional web application and it's working as expected.

Check whether the passed URI value is correct or not i.e. debug the code and get the URI value (while debugging) and paste the uri value in the Browser URL section and hit enter key, check whether the image is getting downloaded or not

See the Traditional Web sample 


Hope this helps you!


Regards,

Benjith Sam

Solution

Hi Phone,

Please find the attached .oml solution file for your reference.


Hope this helps you!

Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Phone,

Please find the attached .oml solution file for your reference.


Hope this helps you!

Regards,

Benjith Sam

 Hello again Benjith Sam, your solution solved my problem and thank you so so so much for sharing the OML.

Phone wrote:

Hello again Benjith Sam, your solution solved my problem and thank you so so so much for sharing the OML.

You are welcome, Phone :)

I'm Happy that it helped you :)


Regards,

Benjith Sam