Skip to content

Commit e7e1fc0

Browse files
stephenjwatkinsstephenjwatkins
authored
Merge pull request #215 from hollyabrams/embeddables-examples
Add embeddables code examples
2 parents 176a63a + a2ce283 commit e7e1fc0

File tree

6 files changed

+211
-0
lines changed

6 files changed

+211
-0
lines changed

‎official/guides/embeddables-guide/client.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<body>
3+
<div>Integrator's Website</div>
4+
<div id="container"></div>
5+
<div>
6+
<button id="button-billing">Manage Billing</button>
7+
<button id="button-carriers">Manage Carriers</button>
8+
<button id="button-payment-logs">Payment Logs</button>
9+
<button id="button-reports">Reports</button>
10+
</div>
11+
12+
<!-- Load EasyPost Embeddables -->
13+
<script src="https://embed.easypost.com/embeddables/1.0/client.js" async></script>
14+
15+
<script>
16+
window.EasyPostEmbeddables = window.EasyPostEmbeddables || {};
17+
window.EasyPostEmbeddables.onLoad = () => {
18+
// Function that calls the integrator's backend to get a session ID
19+
const fetchSessionId = async () => {
20+
const url = '/api/easypost-embeddables/session'; // your server endpoint
21+
try {
22+
const response = await fetch(url);
23+
24+
if (!response.ok) {
25+
throw new Error(`Fetch Session ID error! status: ${response.status}`);
26+
}
27+
28+
const data = await response.json();
29+
return data.session_id;
30+
} catch (error) {
31+
console.error('[EasyPostEmbeddables] Failed to fetch session ID:', error);
32+
return null;
33+
}
34+
};
35+
36+
// Initialize EasyPost Embeddables
37+
const embeddables = window.EasyPostEmbeddables.init({
38+
fetchSessionId,
39+
fonts: [
40+
{
41+
cssSrc: 'https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap',
42+
},
43+
],
44+
appearance: {
45+
tokens: {
46+
'font.family': 'Zen Dots',
47+
},
48+
modalZIndex: '123456',
49+
},
50+
});
51+
52+
// Example UI bindings
53+
document.getElementById('button-billing').addEventListener('click', async () => {
54+
await embeddables.open('manage-billing');
55+
});
56+
57+
document.getElementById('button-carriers').addEventListener('click', async () => {
58+
await embeddables.open('manage-carriers');
59+
});
60+
61+
document.getElementById('button-payment-logs').addEventListener('click', async () => {
62+
await embeddables.open('manage-payment-logs');
63+
});
64+
65+
document.getElementById('button-reports').addEventListener('click', async () => {
66+
await embeddables.open('manage-reports');
67+
});
68+
};
69+
</script>
70+
</body>
71+
</html>

‎official/guides/embeddables-guide/csp-example.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
default-src 'self';
2+
script-src 'self' https://embed.easypost.com 'unsafe-inline';
3+
frame-src https://embed.easypost.com;
4+
style-src 'self' https://assets.embed.easypost.com 'unsafe-inline' https:;
5+
font-src https://assets.embed.easypost.com data: https:;
6+
img-src https://assets.embed.easypost.com data:;
7+
connect-src 'self' https://assets.embed.easypost.com;

‎official/guides/embeddables-guide/fonts-csssrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
EasyPostEmbeddables.init({
2+
fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap' }],
3+
});

‎official/guides/embeddables-guide/fonts-directsrc.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
EasyPostEmbeddables.init({
2+
fonts: [
3+
{
4+
family: 'Avenir',
5+
src: 'https://example.com/fonts/avenir.woff2',
6+
style: 'normal',
7+
weight: '400',
8+
},
9+
],
10+
});

‎official/guides/embeddables-guide/server.py‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import os
2+
import requests
3+
from flask import (
4+
Flask,
5+
jsonify,
6+
)
7+
8+
app = Flask(__name__)
9+
10+
EASYPOST_API_KEY = os.environ.get("EASYPOST_API_KEY", "")
11+
12+
13+
@app.route("/api/easypost-embeddables/session", methods=["GET"])
14+
def create_embeddable_session():
15+
payload = {
16+
"user_id": "SUB_ACCOUNT_USER_ID", # Replace with sub-account user ID
17+
"origin_host": "ORIGIN_HOST", # Replace with integrator's domain
18+
}
19+
20+
response = requests.post(
21+
"https://api.easypost.com/v2/embeddables/session",
22+
auth=(EASYPOST_API_KEY, ""),
23+
json=payload,
24+
headers={"Content-Type": "application/json"},
25+
timeout=10,
26+
)
27+
response.raise_for_status()
28+
return jsonify(response.json())
29+
30+
31+
if __name__ == "__main__":
32+
app.run(port=5000, debug=True)

‎official/guides/embeddables-guide/theme-tokens.json‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
{
2+
"color.primary.900": { "value": "#000824" },
3+
"color.primary.800": { "value": "#061340" },
4+
"color.primary.700": { "value": "#0B2780" },
5+
"color.primary.600": { "value": "#113ABF" },
6+
"color.primary.500": { "value": "#164DFF" },
7+
"color.primary.400": { "value": "#4571FF" },
8+
"color.primary.300": { "value": "#7394FF" },
9+
"color.primary.200": { "value": "#A2B8FF" },
10+
"color.primary.100": { "value": "#D0DBFF" },
11+
"color.primary.050": { "value": "#F6F9FF" },
12+
"color.primary.025": { "value": "#FBFDFF" },
13+
14+
"color.secondary.900": { "value": "#150720" },
15+
"color.secondary.800": { "value": "#280E3C" },
16+
"color.secondary.700": { "value": "#501D77" },
17+
"color.secondary.600": { "value": "#772BB0" },
18+
"color.secondary.500": { "value": "#9F39EE" },
19+
"color.secondary.400": { "value": "#B261F1" },
20+
"color.secondary.300": { "value": "#C588F5" },
21+
"color.secondary.200": { "value": "#D9B0F8" },
22+
"color.secondary.100": { "value": "#ECD7FC" },
23+
"color.secondary.050": { "value": "#F9F1FF" },
24+
"color.secondary.025": { "value": "#FDFBFF" },
25+
26+
"color.positive.900": { "value": "#001E16" },
27+
"color.positive.800": { "value": "#00392C" },
28+
"color.positive.700": { "value": "#007357" },
29+
"color.positive.600": { "value": "#00AC83" },
30+
"color.positive.500": { "value": "#00E5AE" },
31+
"color.positive.400": { "value": "#33EABE" },
32+
"color.positive.300": { "value": "#66EFCE" },
33+
"color.positive.200": { "value": "#99F5DF" },
34+
"color.positive.100": { "value": "#CCFAEF" },
35+
"color.positive.050": { "value": "#EAFFFA" },
36+
"color.positive.025": { "value": "#FAFFFE" },
37+
38+
"color.negative.900": { "value": "#1B0707" },
39+
"color.negative.800": { "value": "#3F1716" },
40+
"color.negative.700": { "value": "#7E2E2D" },
41+
"color.negative.600": { "value": "#BC4543" },
42+
"color.negative.500": { "value": "#FB5C59" },
43+
"color.negative.400": { "value": "#FC7D7A" },
44+
"color.negative.300": { "value": "#FD9D9B" },
45+
"color.negative.200": { "value": "#FDBEBD" },
46+
"color.negative.100": { "value": "#FEDEDE" },
47+
"color.negative.050": { "value": "#FFF2F2" },
48+
"color.negative.025": { "value": "#FFFCFC" },
49+
50+
"color.alert.900": { "value": "#411E00" },
51+
"color.alert.800": { "value": "#834003" },
52+
"color.alert.700": { "value": "#C36108" },
53+
"color.alert.600": { "value": "#F2780A" },
54+
"color.alert.500": { "value": "#FF8D25" },
55+
"color.alert.400": { "value": "#FFAD61" },
56+
"color.alert.300": { "value": "#FFBC7D" },
57+
"color.alert.200": { "value": "#FFD0A4" },
58+
"color.alert.100": { "value": "#FFEDE0" },
59+
"color.alert.050": { "value": "#FFF9F5" },
60+
"color.alert.025": { "value": "#FFFDFD" },
61+
62+
"color.warning.900": { "value": "#423804" },
63+
"color.warning.800": { "value": "#6C4A07" },
64+
"color.warning.700": { "value": "#A57B0F" },
65+
"color.warning.600": { "value": "#D6A015" },
66+
"color.warning.500": { "value": "#F4D35E" },
67+
"color.warning.400": { "value": "#FEE281" },
68+
"color.warning.300": { "value": "#FFEBA4" },
69+
"color.warning.200": { "value": "#FFF2C4" },
70+
"color.warning.100": { "value": "#FFF8DF" },
71+
"color.warning.050": { "value": "#FFFCF0" },
72+
"color.warning.025": { "value": "#FFFEFB" },
73+
74+
"color.neutral.900": { "value": "#000000" },
75+
"color.neutral.800": { "value": "#1C222D" },
76+
"color.neutral.700": { "value": "#384359" },
77+
"color.neutral.600": { "value": "#47547F" },
78+
"color.neutral.500": { "value": "#7086B2" },
79+
"color.neutral.400": { "value": "#8D9EC1" },
80+
"color.neutral.300": { "value": "#A9B6D1" },
81+
"color.neutral.200": { "value": "#C6CFE0" },
82+
"color.neutral.100": { "value": "#E2E7F0" },
83+
"color.neutral.050": { "value": "#F1F1F1" },
84+
"color.neutral.025": { "value": "#FAFAFA" },
85+
"color.neutral.000": { "value": "#FFFFFF" },
86+
87+
"font.family": { "value": "Poppins, \"Poppins Fallback\"" }
88+
}

0 commit comments

Comments
 (0)