From e53421d867e7868d7f4d49cfc3801067d4c3bacb Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:13:56 -0400 Subject: [PATCH 01/11] Add embeddables code examples --- official/guides/embeddables-guide/client.html | 71 +++++++++++++++ .../guides/embeddables-guide/csp-example.txt | 7 ++ .../guides/embeddables-guide/fonts-csssrc.js | 5 ++ .../embeddables-guide/fonts-directsrc.js | 10 +++ official/guides/embeddables-guide/server.py | 28 ++++++ .../embeddables-guide/theme-tokens.json | 88 +++++++++++++++++++ 6 files changed, 209 insertions(+) create mode 100644 official/guides/embeddables-guide/client.html create mode 100644 official/guides/embeddables-guide/csp-example.txt create mode 100644 official/guides/embeddables-guide/fonts-csssrc.js create mode 100644 official/guides/embeddables-guide/fonts-directsrc.js create mode 100644 official/guides/embeddables-guide/server.py create mode 100644 official/guides/embeddables-guide/theme-tokens.json diff --git a/official/guides/embeddables-guide/client.html b/official/guides/embeddables-guide/client.html new file mode 100644 index 00000000..7c61321f --- /dev/null +++ b/official/guides/embeddables-guide/client.html @@ -0,0 +1,71 @@ + + +
Integrator's Website
+
+
+ + + + +
+ + + + + + + diff --git a/official/guides/embeddables-guide/csp-example.txt b/official/guides/embeddables-guide/csp-example.txt new file mode 100644 index 00000000..db91294f --- /dev/null +++ b/official/guides/embeddables-guide/csp-example.txt @@ -0,0 +1,7 @@ +default-src 'self'; +script-src 'self' https://embed.easypost.com 'unsafe-inline'; +frame-src https://embed.easypost.com; +style-src 'self' https://assets.embed.easypost.com 'unsafe-inline' https:; +font-src https://assets.embed.easypost.com data: https:; +img-src https://assets.embed.easypost.com data:; +connect-src 'self' https://assets.embed.easypost.com; diff --git a/official/guides/embeddables-guide/fonts-csssrc.js b/official/guides/embeddables-guide/fonts-csssrc.js new file mode 100644 index 00000000..a497d8a2 --- /dev/null +++ b/official/guides/embeddables-guide/fonts-csssrc.js @@ -0,0 +1,5 @@ +EasyPostEmbeddables.init({ + fonts: [ + { cssSrc: "https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" }, + ], +}); diff --git a/official/guides/embeddables-guide/fonts-directsrc.js b/official/guides/embeddables-guide/fonts-directsrc.js new file mode 100644 index 00000000..593e00c9 --- /dev/null +++ b/official/guides/embeddables-guide/fonts-directsrc.js @@ -0,0 +1,10 @@ +EasyPostEmbeddables.init({ + fonts: [ + { + family: "Avenir", + src: "https://example.com/fonts/avenir.woff2", + style: "normal", + weight: "400", + }, + ], +}); diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py new file mode 100644 index 00000000..63dc8bb3 --- /dev/null +++ b/official/guides/embeddables-guide/server.py @@ -0,0 +1,28 @@ +from flask import Flask, jsonify +import requests +import os + +app = Flask(__name__) + +EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") + +@app.route("/api/easypost-embeddables/session", methods=["GET"]) +def create_embeddable_session(): + payload = { + "user_id": , + "origin_host": + } + + response = requests.post( + "https://api.easypost.com/v2/embeddables/session", + auth=(EASYPOST_API_KEY, ""), + json=payload, + headers={"Content-Type": "application/json"}, + timeout=10, + ) + + response.raise_for_status() + return jsonify(response.json()) + +if __name__ == "__main__": + app.run(port=5000, debug=True) diff --git a/official/guides/embeddables-guide/theme-tokens.json b/official/guides/embeddables-guide/theme-tokens.json new file mode 100644 index 00000000..fd02609a --- /dev/null +++ b/official/guides/embeddables-guide/theme-tokens.json @@ -0,0 +1,88 @@ +{ + "color.primary.900": { "value": "#000824" }, + "color.primary.800": { "value": "#061340" }, + "color.primary.700": { "value": "#0B2780" }, + "color.primary.600": { "value": "#113ABF" }, + "color.primary.500": { "value": "#164DFF" }, + "color.primary.400": { "value": "#4571FF" }, + "color.primary.300": { "value": "#7394FF" }, + "color.primary.200": { "value": "#A2B8FF" }, + "color.primary.100": { "value": "#D0DBFF" }, + "color.primary.050": { "value": "#F6F9FF" }, + "color.primary.025": { "value": "#FBFDFF" }, + + "color.secondary.900": { "value": "#150720" }, + "color.secondary.800": { "value": "#280E3C" }, + "color.secondary.700": { "value": "#501D77" }, + "color.secondary.600": { "value": "#772BB0" }, + "color.secondary.500": { "value": "#9F39EE" }, + "color.secondary.400": { "value": "#B261F1" }, + "color.secondary.300": { "value": "#C588F5" }, + "color.secondary.200": { "value": "#D9B0F8" }, + "color.secondary.100": { "value": "#ECD7FC" }, + "color.secondary.050": { "value": "#F9F1FF" }, + "color.secondary.025": { "value": "#FDFBFF" }, + + "color.positive.900": { "value": "#001E16" }, + "color.positive.800": { "value": "#00392C" }, + "color.positive.700": { "value": "#007357" }, + "color.positive.600": { "value": "#00AC83" }, + "color.positive.500": { "value": "#00E5AE" }, + "color.positive.400": { "value": "#33EABE" }, + "color.positive.300": { "value": "#66EFCE" }, + "color.positive.200": { "value": "#99F5DF" }, + "color.positive.100": { "value": "#CCFAEF" }, + "color.positive.050": { "value": "#EAFFFA" }, + "color.positive.025": { "value": "#FAFFFE" }, + + "color.negative.900": { "value": "#1B0707" }, + "color.negative.800": { "value": "#3F1716" }, + "color.negative.700": { "value": "#7E2E2D" }, + "color.negative.600": { "value": "#BC4543" }, + "color.negative.500": { "value": "#FB5C59" }, + "color.negative.400": { "value": "#FC7D7A" }, + "color.negative.300": { "value": "#FD9D9B" }, + "color.negative.200": { "value": "#FDBEBD" }, + "color.negative.100": { "value": "#FEDEDE" }, + "color.negative.050": { "value": "#FFF2F2" }, + "color.negative.025": { "value": "#FFFCFC" }, + + "color.alert.900": { "value": "#411E00" }, + "color.alert.800": { "value": "#834003" }, + "color.alert.700": { "value": "#C36108" }, + "color.alert.600": { "value": "#F2780A" }, + "color.alert.500": { "value": "#FF8D25" }, + "color.alert.400": { "value": "#FFAD61" }, + "color.alert.300": { "value": "#FFBC7D" }, + "color.alert.200": { "value": "#FFD0A4" }, + "color.alert.100": { "value": "#FFEDE0" }, + "color.alert.050": { "value": "#FFF9F5" }, + "color.alert.025": { "value": "#FFFDFD" }, + + "color.warning.900": { "value": "#423804" }, + "color.warning.800": { "value": "#6C4A07" }, + "color.warning.700": { "value": "#A57B0F" }, + "color.warning.600": { "value": "#D6A015" }, + "color.warning.500": { "value": "#F4D35E" }, + "color.warning.400": { "value": "#FEE281" }, + "color.warning.300": { "value": "#FFEBA4" }, + "color.warning.200": { "value": "#FFF2C4" }, + "color.warning.100": { "value": "#FFF8DF" }, + "color.warning.050": { "value": "#FFFCF0" }, + "color.warning.025": { "value": "#FFFEFB" }, + + "color.neutral.900": { "value": "#000000" }, + "color.neutral.800": { "value": "#1C222D" }, + "color.neutral.700": { "value": "#384359" }, + "color.neutral.600": { "value": "#47547F" }, + "color.neutral.500": { "value": "#7086B2" }, + "color.neutral.400": { "value": "#8D9EC1" }, + "color.neutral.300": { "value": "#A9B6D1" }, + "color.neutral.200": { "value": "#C6CFE0" }, + "color.neutral.100": { "value": "#E2E7F0" }, + "color.neutral.050": { "value": "#F1F1F1" }, + "color.neutral.025": { "value": "#FAFAFA" }, + "color.neutral.000": { "value": "#FFFFFF" }, + + "font.family": { "value": "Poppins, \"Poppins Fallback\"" } +} From 721bd60106aa6d9a633e6bf84a1c2b4c7f7b6c78 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:23:27 -0400 Subject: [PATCH 02/11] make format-node --- official/guides/embeddables-guide/client.html | 26 +++++++++---------- .../guides/embeddables-guide/fonts-csssrc.js | 4 +-- .../embeddables-guide/fonts-directsrc.js | 8 +++--- official/guides/embeddables-guide/server.py | 4 +-- 4 files changed, 20 insertions(+), 22 deletions(-) diff --git a/official/guides/embeddables-guide/client.html b/official/guides/embeddables-guide/client.html index 7c61321f..6ca11d7d 100644 --- a/official/guides/embeddables-guide/client.html +++ b/official/guides/embeddables-guide/client.html @@ -17,7 +17,7 @@ window.EasyPostEmbeddables.onLoad = () => { // Function that calls the integrator's backend to get a session ID const fetchSessionId = async () => { - const url = "/api/easypost-embeddables/session"; // your server endpoint + const url = '/api/easypost-embeddables/session'; // your server endpoint try { const response = await fetch(url); @@ -28,7 +28,7 @@ const data = await response.json(); return data.session_id; } catch (error) { - console.error("[EasyPostEmbeddables] Failed to fetch session ID:", error); + console.error('[EasyPostEmbeddables] Failed to fetch session ID:', error); return null; } }; @@ -38,32 +38,32 @@ fetchSessionId, fonts: [ { - cssSrc: "https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap", + cssSrc: 'https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap', }, ], appearance: { tokens: { - "font.family": "Zen Dots", + 'font.family': 'Zen Dots', }, - modalZIndex: "123456", + modalZIndex: '123456', }, }); // Example UI bindings - document.getElementById("button-billing").addEventListener("click", async () => { - await embeddables.open("manage-billing"); + document.getElementById('button-billing').addEventListener('click', async () => { + await embeddables.open('manage-billing'); }); - document.getElementById("button-carriers").addEventListener("click", async () => { - await embeddables.open("manage-carriers"); + document.getElementById('button-carriers').addEventListener('click', async () => { + await embeddables.open('manage-carriers'); }); - document.getElementById("button-payment-logs").addEventListener("click", async () => { - await embeddables.open("manage-payment-logs"); + document.getElementById('button-payment-logs').addEventListener('click', async () => { + await embeddables.open('manage-payment-logs'); }); - document.getElementById("button-reports").addEventListener("click", async () => { - await embeddables.open("manage-reports"); + document.getElementById('button-reports').addEventListener('click', async () => { + await embeddables.open('manage-reports'); }); }; diff --git a/official/guides/embeddables-guide/fonts-csssrc.js b/official/guides/embeddables-guide/fonts-csssrc.js index a497d8a2..61b35fe4 100644 --- a/official/guides/embeddables-guide/fonts-csssrc.js +++ b/official/guides/embeddables-guide/fonts-csssrc.js @@ -1,5 +1,3 @@ EasyPostEmbeddables.init({ - fonts: [ - { cssSrc: "https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" }, - ], + fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap' }], }); diff --git a/official/guides/embeddables-guide/fonts-directsrc.js b/official/guides/embeddables-guide/fonts-directsrc.js index 593e00c9..a1868cd3 100644 --- a/official/guides/embeddables-guide/fonts-directsrc.js +++ b/official/guides/embeddables-guide/fonts-directsrc.js @@ -1,10 +1,10 @@ EasyPostEmbeddables.init({ fonts: [ { - family: "Avenir", - src: "https://example.com/fonts/avenir.woff2", - style: "normal", - weight: "400", + family: 'Avenir', + src: 'https://example.com/fonts/avenir.woff2', + style: 'normal', + weight: '400', }, ], }); diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 63dc8bb3..6f2ff893 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -9,8 +9,8 @@ @app.route("/api/easypost-embeddables/session", methods=["GET"]) def create_embeddable_session(): payload = { - "user_id": , - "origin_host": + "user_id": "SUB_ACCOUNT_USER_ID", + "origin_host": "ORIGIN_HOST" } response = requests.post( From 57b86e1bbbd9618194beea3751a4d803e7cf326b Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:34:22 -0400 Subject: [PATCH 03/11] Fix python example formatting to pass lint --- official/guides/embeddables-guide/server.py | 3 +++ 1 file changed, 3 insertions(+) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 6f2ff893..8fae5311 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -2,10 +2,12 @@ import requests import os + app = Flask(__name__) EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") + @app.route("/api/easypost-embeddables/session", methods=["GET"]) def create_embeddable_session(): payload = { @@ -24,5 +26,6 @@ def create_embeddable_session(): response.raise_for_status() return jsonify(response.json()) + if __name__ == "__main__": app.run(port=5000, debug=True) From e1c583a422414b3e5d4b4cebee88ccb91d808e9f Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:43:51 -0400 Subject: [PATCH 04/11] Format Python example with Black --- official/guides/embeddables-guide/server.py | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 8fae5311..dfdf6e28 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -10,10 +10,7 @@ @app.route("/api/easypost-embeddables/session", methods=["GET"]) def create_embeddable_session(): - payload = { - "user_id": "SUB_ACCOUNT_USER_ID", - "origin_host": "ORIGIN_HOST" - } + payload = {"user_id": "SUB_ACCOUNT_USER_ID", "origin_host": "ORIGIN_HOST"} response = requests.post( "https://api.easypost.com/v2/embeddables/session", From 97136c14a092c7f3e88259aee933e534e7b727c6 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:51:48 -0400 Subject: [PATCH 05/11] Apply isort formatting to Python example --- official/guides/embeddables-guide/server.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index dfdf6e28..8ba42f6c 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,7 +1,7 @@ -from flask import Flask, jsonify -import requests import os +import requests +from flask import Flask, jsonify app = Flask(__name__) From 556740188bd1ebc3f6e4fac2a7e0972d818b1485 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 19:57:43 -0400 Subject: [PATCH 06/11] Format server.py --- official/guides/embeddables-guide/server.py | 1 - 1 file changed, 1 deletion(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 8ba42f6c..4950a113 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,5 +1,4 @@ import os - import requests from flask import Flask, jsonify From dce84eb43d294548efac2d4562a6fab65159d3c4 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 20:11:57 -0400 Subject: [PATCH 07/11] Fix import layout to satisfy isort CI config --- official/guides/embeddables-guide/server.py | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 4950a113..3797a011 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,15 +1,16 @@ import os import requests from flask import Flask, jsonify - app = Flask(__name__) - EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") @app.route("/api/easypost-embeddables/session", methods=["GET"]) def create_embeddable_session(): - payload = {"user_id": "SUB_ACCOUNT_USER_ID", "origin_host": "ORIGIN_HOST"} + payload = { + "user_id": "SUB_ACCOUNT_USER_ID", # Replace with sub-account user ID + "origin_host": "ORIGIN_HOST", # Replace with integrator's domain + } response = requests.post( "https://api.easypost.com/v2/embeddables/session", @@ -18,7 +19,6 @@ def create_embeddable_session(): headers={"Content-Type": "application/json"}, timeout=10, ) - response.raise_for_status() return jsonify(response.json()) From 48735aee6593fc345fb3961c7b0d66d910923ef9 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 20:21:00 -0400 Subject: [PATCH 08/11] Apply isort and black formatting --- official/guides/embeddables-guide/server.py | 1 + 1 file changed, 1 insertion(+) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 3797a011..6b0a4310 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,6 +1,7 @@ import os import requests from flask import Flask, jsonify + app = Flask(__name__) EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") From a13d8bc30cb9992ccdf1185cffa596f4a6204cb1 Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 20:27:25 -0400 Subject: [PATCH 09/11] Fix server.py formatting issue --- official/guides/embeddables-guide/server.py | 3 +++ 1 file changed, 3 insertions(+) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 6b0a4310..09c6abaf 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,8 +1,11 @@ import os + import requests from flask import Flask, jsonify + app = Flask(__name__) + EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") From 97d9bf65c77baf4abab853b30c6c64ac23c7eddc Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 20:34:18 -0400 Subject: [PATCH 10/11] Fixed import orger with isort using Black profile --- official/guides/embeddables-guide/server.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index 09c6abaf..f244483c 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,9 +1,7 @@ import os - import requests from flask import Flask, jsonify - app = Flask(__name__) EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "") From a2ce283c944faa2101f9442c8bca9d2a2dc8ea3b Mon Sep 17 00:00:00 2001 From: Holly Abrams Date: Mon, 27 Oct 2025 21:23:28 -0400 Subject: [PATCH 11/11] Fix server.py formatting issue --- official/guides/embeddables-guide/server.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/official/guides/embeddables-guide/server.py b/official/guides/embeddables-guide/server.py index f244483c..e0eb0b1f 100644 --- a/official/guides/embeddables-guide/server.py +++ b/official/guides/embeddables-guide/server.py @@ -1,6 +1,9 @@ import os import requests -from flask import Flask, jsonify +from flask import ( + Flask, + jsonify, +) app = Flask(__name__)