🍩

donutshop is a simple way to connect a juicebox project to a printful store

built with:

• nextjs app router
• tailwindcss
• wagmi.sh
• connectkit
• walletconnect
• infura
• printful api
• juicebox pay

Setup

Important

This is still a work in progress. Product images and printful products are hardcoded. The next steps are to make these dynamic and configurable.

1. Clone the repo
2. npm install
3. cp blank.env.local .env.local
4. Create a printful account and store
5. Login with same account and create printful private token (help)
6. Name the token, add an email (required), set expiration date, and set minimum scopes shown below, add to .env.local (help)
7. Create a wallet connect project and add to .env.local
8. Create an infura API key and add to .env.local
9. Create a upstash redis instance and add to .env.local (used to track order nonces)
10. Set the NEXT_PUBLIC_JUICEBOX_PROJECT_ID in .env.local to the juicebox project id (help)
11. Deploy!

Ordering sequence

sequenceDiagram
    participant C as Checkout
    participant I as Initialize Order API
    participant J as Juicebox
    participant P as Place Order API
    participant F as Printful API

    C->>I: Request orderIdObj
    I->>I: Generate id
    I->>I: hmac(id, SECRET)
    I-->>C: { id, idHash }
    C->>J: pay(..., memo = idHash)
    J-->>C: { txnHash }
    C->>P: { txnHash, id, shippingAddress }
    P->>J: Fetch transaction details
    P->>P: check id = hmac(id, SECRET)
    P->>F: check order doesn't exist
    F-->>P: order doesn't exist
    P->>F: Place order with id
    F-->>P: order placed information
    P-->>C: Confirm order placed

Loading