Dynamic orders based on third party data

[Klinopra]

Hey there! I'm having trouble finding a solution to my problem and was hoping someone could help me out.

I'm trying to add a component to my index.tsx (Next.js starter) page that allows visitors to customize their own product, similar to the way Tesla allows customers to choose different options for their cars. The catch is that the product image is generated by a third-party website, so I need a way to retrieve the image and allow visitors to choose additional features like frames.

Unfortunately, I can't create a draft order because I'm not able to upload the image generated by the third-party site. I'm working with Medusa but I don't have a lot of experience with it, so I'm not sure how to approach this problem.

If anyone has any suggestions or could provide a solution, I would be incredibly grateful! Thanks in advance.

[srindom]

I can think of two ways you might be able to go about this:

1. Use line item metadata
   When adding something to the cart you can send metadata to be stored on the line item. E.g.:

   POST /store/carts/:id/line-items
   { variant_id: [the variant id], quantity: 1, metadata: { custom_thumbnail: [insert from 3rd part] }
   

   You would have to make sure that the metadata.custom_thumbnail is being used when displaying cart items to the customer.

2. Create a custom endpoint that sets thumbnail.
   If you write a custom endpoint to add the customized items to your cart you can make sure that lineItem.thumbnail uses the URL to the 3rd party image instead of the default thumbnail (i.e., the one stored on the product).