Developer Docs

Table of contents

Intro
Overall Integration Flow
Customizing Colors
API Reference

PhotoPacks.AI provides partner developers the ability to integrate a while-labeled set of components directly into your website.

To get started, contact info@photopacks.ai to discuss integration details. You will be provided with two API keys; one for your development environment and one for your production environment. The integration will include two iFrames that must be provided a token that can passed to your frontend and embedded into the iFrame. There are also two API endpoints that must be contacted from your backend while using your secret API key - one for retrieving the token, and one for creating orders.

Overall Integration Flow

API Keys

Each partner will need to specify the domain from which they will be including iFrame widgets.
Your development API key will generate fake orders so you can test the full end-to-end flow.
The production API key will fully process orders, which will incur usage fees.
These API keys must not be exposed to client browsers.

1. Retrieving a Token

To retrieve a token, make a call to POST /external/tokens from your backend using your API key. The body of the request must include the external_user_id, which represents a unique identifier of your user (e.g. the user's email). Return the token to your frontend to embed in the iFrame widgets. Here are examples for Python and C#:


  class PhotoPacksTokensView(APIView):
      def get(self, request, *args, **kwargs):
          try:
              response = requests.post(
                  "https://www.photopacks.ai/external/tokens",
                  headers={
                      "X-API-Key": os.environ["PHOTO_PACKS_PARTNER_API_KEY"],
                      "Content-Type": "application/json"
                  },
                  json={"external_user_id": request.user.id}
              )
              response.raise_for_status()
              return Response({"token": response.json().get("token")}, status=status.HTTP_201_CREATED)
          except requests.exceptions.RequestException as e:
              print("Error:", e)
              return Response({"error": "Something bad!"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)


  public class PhotoPacksTokensController : ApiController
  {
      // Assuming you've stored your API key in the Web.config for example
      private static readonly string apiKey = System.Configuration.ConfigurationManager.AppSettings["PhotoPacksPartnerApiKey"];
  
      [HttpGet]
      public async Task<IHttpActionResult> GetToken()
      {
          using (var client = new HttpClient())
          {
              client.BaseAddress = new Uri("https://www.photopacks.ai/external/");
              client.DefaultRequestHeaders.Accept.Clear();
              client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
              client.DefaultRequestHeaders.Add("X-API-Key", apiKey);
  
              var payload = new
              {
                  // This should be the unique identifier (e.g. email) of the user that is currently logged-in
                  external_user_id = User.Identity.Name
              };
  
              HttpResponseMessage response = await client.PostAsJsonAsync("tokens", payload);
              response.EnsureSuccessStatusCode();
  
              if (response.IsSuccessStatusCode)
              {
                  var content = await response.Content.ReadAsStringAsync();
                  var result = JsonConvert.DeserializeObject<dynamic>(content);
                  return Created(new Uri(Request.RequestUri, "token"), new { token = result.token });
              }
              return InternalServerError();
          }
      }
  }

2. Viewing Orders

To allow your users to view orders, you can simply include the following widget in your frontend. Pass the token that you previously retrieved into the iFrame:


    <iframe
      src={`https://www.photopacks.ai/partners/orders?token=${token}`}
      width="100%"
      height="600"
      frameBorder="0"
    >
      Sorry, your browser does not support inline frames.
    </iframe>

hero — This is the "View Orders" widget. A list of your user's orders will be displayed here, or a notification that no orders have yet been placed.

3. Creating Orders

To allow your users to create orders will require an additional step beyond creating the token. From your backend, call the POST /external/orders API with your API key and external_user_id, which represents a unique identifier of your user (e.g. the user's email). Here is an example in Python and C#:


  class PhotoPacksOrdersView(APIView):
      def post(self, request, *args, **kwargs):
          try:
              response = requests.post(
                  "https://www.photopacks.ai/external/orders",
                  headers={
                      "X-API-Key": os.environ["PHOTO_PACKS_PARTNER_API_KEY"],
                      "Content-Type": "application/json"
                  },
                  json={"external_user_id": request.user.id}
              )
              response.raise_for_status()
  
              data = response.json()
  
              return Response(
                  {"order_id": data.get("order_id")},
                  status=status.HTTP_200_OK
              )
          except requests.exceptions.RequestException as e:
              print("Error:", e)
              return Response({"error": "Something bad!"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)


  public class PhotoPacksOrdersController : ApiController
  {
      private static readonly string apiKey = System.Configuration.ConfigurationManager.AppSettings["PhotoPacksPartnerApiKey"];
  
      [HttpPost]
      public async Task<IHttpActionResult> CreateOrder()
      {
          using (var client = new HttpClient())
          {
              client.BaseAddress = new Uri("https://www.photopacks.ai/external/");
              client.DefaultRequestHeaders.Accept.Clear();
              client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
              client.DefaultRequestHeaders.Add("X-API-Key", apiKey);
  
              var payload = new
              {
                  // This should be the unique identifier (e.g. email) of the user that is currently logged-in
                  external_user_id = User.Identity.Name
              };
  

              HttpResponseMessage response = await client.PostAsJsonAsync("orders", payload);
              response.EnsureSuccessStatusCode();

              if (response.IsSuccessStatusCode)
              {
                  var content = await response.Content.ReadAsStringAsync();
                  var result = JsonConvert.DeserializeObject<dynamic>(content);
                  return Ok(new { order_id = result.order_id });
              }
              return InternalServerError();
          }
      }
  }

You will receive a response that contains the order_id Return the order_id to your frontend. Pass both the order_id and token as parameters into this iFrame to display the Order Creation widget:


    <iframe
      src={`https://www.photopacks.ai/partners/select-type?id=${orderId}&wizard=true&token=${token}`}
      width="100%"
      height="600"
      frameBorder="0"
    >
      Sorry, your browser does not support inline frames.
    </iframe>

Customizing Colors

Colors in your widgets can be customized by providing the proper query parameters in the url of the iFrame with a hex value for the color. For example: https://www.photopacks.ai/partners/orders?token=1234&color-700=4701FD.

The following color query parameters can be provided:

color-100
color-200
color-300
color-400
color-500
color-600
color-700
color-800

Each of the values represents a particular color in the application (e.g. primary, secondary, tertiary, and buttons states such as hover and enabled).

API Reference

POST https://www.photopacks.ai/external/tokens

Request Headers:

X-API-Key: Your secret API key

Request Body:


{
  "external_user_id": "unique-user-id" # This should come from your user's session
}

Response Body:


{
  "token": "your-unique-token" # Inject this into your iFrame
}

POST https://www.photopacks.ai/external/orders

Request Headers:

X-API-Key: Your secret API key

Request Body:


{
  "external_user_id": "unique-user-id" # This should come from your user's server-side session
}

Response Body:


{
  "order_id": "unique-order-id" # Inject this into your iFrame
}