How to Auto-Generate Unique Gift Cards with Open AI and Bannerbear (Node.js)

Choosing the right gifts has been a hard decision for many people—especially when you’re unsure about the recipient’s preference. This is a big part of why people send gift cards instead of purchasing specific items. Gift cards allow the recipient to choose exactly what they want, ensuring they get something they will truly enjoy.

The e-gift card market is projected to be worth $724.3 billion by 2028, at a market growth of 14.2% compound annual growth rate. Not only they are more environmentally friendly than physical gift cards, but they are also more convenient as they can be instantly sent via email. Besides that, the sender can also easily personalize it with a heartfelt message, adding a personal touch to the gift!

However, most gift cards in the market lack uniqueness, and creating unique designs can be time-consuming and expensive. Fortunately, with the help of OpenAI and Bannerbear, designing and creating unique gift cards is now easier than ever. Without using any graphic design skills, batches of unique gift cards can be created in one go, like some examples below:

… and best of all, the process is automated.

What is Bannerbear

Bannerbear is a tool that helps you generate custom images, videos, and more using API. It has libraries in various popular programming languages like Ruby, PHP, and Node.js, making integrating image generation and other media manipulation functionalities into your application effortless.

The images and other media files are created based on a template where you can add static and dynamic objects such as images, text, and shapes. By passing different data to the API, the values of these dynamic objects can be altered to generate unique content.

All API requests on Bannerbear are scoped to a project and you can create multiple design templates in the same one. After creating the design templates, you can access them using the project API key and template IDs.

Now that you have a little bit of an idea of what Bannerbear does, let’s get started!

Creating an OpenAI API Key

OpenAI offers Images API for generating or manipulating images with the DALL·E model. To use the API, you need to have an OpenAI account with credits. After logging in, create a new secret key from the “API keys” tab:

Give the new secret key a name and follow the instructions on the screen to continue:

After the new secret key has been created, save it somewhere safe. We will need it in the code later.

Creating a Bannerbear Project

We need a Bannerbear account to make a template for automatically producing gift cards using images generated by OpenAI. A QR code that points to a unique redemption link will also be generated and added to each gift card.

Sign up for an account and create a new project in your account. Then, duplicate the gift card template below to your project:

The template contains dynamic image objects like text_amount, qr_code, image_container, etc. You can change their values by specifying them in the request body when making an API call to Bannerbear to trigger the gift card generation process.

Next, get the project API key and template ID. We will need them in our code to access the project and template.

Generating Gift Cards with OpenAI DALL·E and Bannerbear

After getting OpenAI and Bannerbear's API keys and template ID, we can use the APIs in our code to generate AI images and pass them to the Bannerbear template to produce unique gift cards automatically.

Create a new Node.js project by running npm init in your project directory. Then, create a file named index.js for writing the code.

Step 1. Install and Import the OpenAI and Bannerbear Libraries

In the terminal/command prompt, run the command below in your project directory to install the OpenAI and Bannerbear libraries:

npm install openai bannerbear

In index.js, import the libraries and declare the API keys and template ID as constants:

const { Bannerbear } = require('bannerbear');
const OpenAI = require('openai');

const OPENAI_API_KEY = 'your_openai_api_key';
const BB_API_KEY = 'your_bannerbear_api_key';
const BB_TEMPLATE_ID = 'your_template_id';

Then, create a self-invoking function for containing the code in the following steps:

(async () => {
  // Generate AI images

  // Generate gift cards
})()

Step 2. Generate Images with OpenAI API

Create a new instance of OpenAI with its API key. Then, call the images.generate() method with options such as prompt, size, and n to generate images using the DALL·E model:

// Generate AI images
const openai = new OpenAI({apiKey: OPENAI_API_KEY});
const image = await openai.images.generate({
    prompt: 'A cat wearing sunglasses, in the style of vintage art deco poster',
    size: '512x512',
    n: 10
});

You can generate images in the size of 256x256, 512x512, or 1024x1024 pixels and request up to 10 images in a single call (as specified in the n parameter). When n is omitted, only one image will be generated.

The method should return an array containing the image URLs:

[
  {
    url: url_one,
  },
  { 
    url: url_two 
  },
  { 
    url: url_three 
  },
  ...
]

🐻 Bear Tips: Not sure how to create prompts that generate desired results? You can refer to this DALL·E Prompt Book.

Step 3. Generate Gift Cards with Bannerbear

We can now pass the images to the Bannerbear template to produce gift cards with QR codes on them automatically. Create a new instance of Bannerbear using the API key. For each of the images, the create_image() method will be called with the modifications array which contains the image URL and QR code's target URL:

// Generate gift cards
const bb = new Bannerbear(BB_API_KEY);

image.data.forEach(async (data) => {
  const aiImageUrl = data.url;
  const images = await bb.create_image(
    BB_TEMPLATE_ID,
    {
      modifications: [
        {
          name: 'qr_code',
          target: 'https://www.bannerbear.com', // replace with a unique link for each gift card
        },
        {
          name: 'image_container',
          image_url: aiImageUrl,
        },
      ],
    },
    true
  );

  console.log(images);
});

You should replace the QR code target URL with a unique redemption link for every gift card. Bannerbear will automatically generate a QR code that points to the URL.

You can also replace the QR code with a bar code:

When you're using a bar code, specify a unique code ( 123456789 ) instead of a target URL:

modifications: [
    {
        name: 'bar_code',
        bar_code_data: 123456789 // replace with a unique code for each gift card
    },
    {
        name: 'image_container',
        image_url: aiImageUrl,
    }
]

When you execute the index.js file, it will automatically create gift cards with images generated by OpenAI. Here are more results from the prompt "A cat wearing sunglasses, in the style of vintage art deco poster":

🐻 View the full code on GitHub.

What’s Next

You can modify the project to allow users to add personalized messages to the gift cards, or even let them enter their prompts for customizing the gift card designs! This can create a more personalized experience.  

Using OpenAI and Bannerbear APIs, you can easily generate gift cards with different designs automatically. If you would like to create other images such as mockups, banners, and OG images automatically, check out the tutorials below:

• How to Make a T-Shirt/Merchandise Mockup Generator Using Bannerbear in Node.js
• How to Make a Device Mockup Generator for Websites using Bannerbear
• How to Create a Dynamic Twitter Banner with an Event Countdown in Node.js (Updated Automatically)
• How to Use the Bannerbear WordPress Plugin to Generate Dynamic Open Graph Images