medusa-plugin-resend

Medusa is a set of commerce modules and tools that allow you to build rich, reliable, and performant commerce applications without reinventing core commerce logic. The modules can be customized and used to build advanced ecommerce stores, marketplaces, or any product that needs foundational commerce primitives. All modules are open-source and freely available on npm.

Features

• Templates are stored locally.
• Templates can either be handlebars templates or compiled React templates
• You can refer to the Medusa template reference to see all data fields that are available for each event: Template Reference
• An API endpoint that is useful for testing and that can be used with other (non-Medusa) portions of your storefront application is included. By default, the endpoint does nothing for security reasons. See configuration options below to enable it.

Node v20

• If you are starting to test out Node v20, be sure you give runtime permission for fs reads due to the new Node permissions API. Otherwise, this plugin will not be able to read your email templates from the file system.

Configuration

{
resolve: `medusa-plugin-resend`,
    options: {
        api_key: process.env.RESEND_API_ID,
        from: process.env.SES_FROM,
        enable_endpoint: process.env.SES_ENABLE_ENDPOINT,
        template_path: process.env.SES_TEMPLATE_PATH,
        subject_template_type: process.env.RESEND_SUBJECT_TEMPLATE_TYPE,
        body_template_type: process.env.RESEND_BODY_TEMPLATE_TYPE,
        order_placed_template: 'order_placed',
        order_shipped_template: 'order_shipped',
        customer_password_reset_template: 'customer_password_reset',
        gift_card_created_template: 'gift_card_created',
        //order_canceled_template: 'order_canceled',
        //order_refund_created_template: 'order_refund_created',
        //order_return_requested_template: 'order_return_requested',
        //order_items_returned_template: 'order_items_returned',
        //swap_created_template: 'swap_created',
        //swap_shipment_created_template: 'swap_shipment_created',
        //swap_received_template: 'swap_received',
        //claim_shipment_created_template: 'claim_shipment_created',
        //user_password_reset_template: 'user_password_reset',
        //medusa_restock_template: 'medusa_restock',
    }
},

• Obtain an API key from your Resend dashboard
• The 'from' setting should be a valid email address on a domain you have properly configured with Resend
• The template path is the location of your email templates. It can be a full (absolute) path or a path relative to the medusa root folder, e.g., 'medusa/data/templates'.
• The 'subject_template_type' can be 'handlebars' or 'text'. The default is handlebars. If you choose text, you cannot include dynamic values (like customer name or order number) in your subject lines.
• The body_template-type' can be 'handlebars' or 'react'. The default is handlebars. See below for info on using React templates.

Why Resend?

Sendgrid

• Has a web-based GUI template editor
• Easy and quick to sign up and get started

• Not the cheapest option
• Templates are not stored locally and not easy to add to version control
• Some people don't want a GUI email editor and find it a hindrance

AWS Simple Email Service (SES)

• The cheapest option. Often free if you host your app on EC2. Still usually the cheapest option even if you don't.
• Convenient if you are already using AWS services
• Medusa plugin uses local email templates that can be added to version control repos

• No GUI email editor
• Some people find AWS difficult to navigate/set up
• New customers are placed in sandbox mode to start and have to submit a request to get real email-sending privileges

Resend

• Easy and quick to set up
• Medusa plugin uses local email templates that can be added to version control repos
• Can use React templates

• No GUI email editor
• Not the cheapest option
• Currently in beta, so invite-only (or join the waitlist)

Templates

medusa-server  // root directory
|-data
    |-templates
        |-order_placed  // or whatever you name your templates and specify in the config file
            |-subject.hbs
            |-subject.text
            |-html.hbs
            |-html.jsx  // uncompiled React template
            |-html.js   // compiled React template
            |-text.hbs
        |- etc

Transpiling React Templates

npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react

npx babel 'order_placed/html.jsx' --presets=@babel/preset-env,@babel/preset-react -o 'order_placed/html.js'

Testing

Acknowledgement