{"id":2068,"date":"2022-01-20T09:42:28","date_gmt":"2022-01-20T09:42:28","guid":{"rendered":"https:\/\/www.reloadly.com\/blog\/?p=2068"},"modified":"2022-01-20T11:13:36","modified_gmt":"2022-01-20T11:13:36","slug":"building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis","status":"publish","type":"post","link":"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/","title":{"rendered":"Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_46 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69d2ceada8645\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69d2ceada8645\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-visibility-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Creating_a_Svelte_App_and_installing_dependencies\" title=\"Creating a Svelte App and installing dependencies\">Creating a Svelte App and installing dependencies<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Building_a_Node_server\" title=\"Building a Node server\">Building a Node server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Building_a_Svelte_component\" title=\"Building a Svelte component\">Building a Svelte component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Purchasing_a_Gift_Card\" title=\"Purchasing a Gift Card\">Purchasing a Gift Card<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Additional_Challenges\" title=\"Additional Challenges\">Additional Challenges<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blog.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#Summary\" title=\"Summary\">Summary<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Much of full-stack web development has evolved from traditional HTML\/CSS\/JS architecture to the use of full-scale JavaScript-themed libraries and frameworks. One of these is Svelte which alongside Angular, React and Vue &#8211; is largely being adopted as a rapidly scalable web framework. In this article, we\u2019ll explore building a full-stack web app with Node JS for our server.&nbsp;<br>Our app will be a CALL OF DUTY gift card store that uses Reloadly\u2019s GiftCard API to make the gift card available and Stripe\u2019s Session API to create a checkout session where we can purchase the gift card. As a reader, the concepts in this article will be easier to grasp if you have an intermediate understanding of JavaScript, NodeJS, and Svelte. You may want to refer to these resources while reading as well:<\/p>\n\n\n\n<ul><li><a target=\"_blank\" href=\"https:\/\/svelte.dev\/tutorial\/basics\" rel=\"noreferrer noopener\">Getting started with Svelte<\/a><\/li><li><a target=\"_blank\" href=\"https:\/\/docs.reloadly.com\/giftcards\/products\/get-product-by-id\" rel=\"noreferrer noopener\">Viewing a gift card on Reloadly<\/a><\/li><li><a target=\"_blank\" href=\"https:\/\/stripe.com\/docs\/payments\/accept-a-payment?integration=checkout\" rel=\"noreferrer noopener\">Accepting payments on Stripe<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>TL:DR: &nbsp;<\/em><a target=\"_blank\" href=\"https:\/\/github.com\/fullstackmafia\/svelte-stripe-store\" rel=\"noreferrer noopener\"><em>Code sample on GitHub<\/em><\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_a_Svelte_App_and_installing_dependencies\"><\/span>Creating a Svelte App and installing dependencies<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The first step to creating our gift card store is to scaffold a Svelte app from scratch and install a number of dependencies (also called packages). Here\u2019s a list of dependencies we\u2019ll need for our app:<\/p>\n\n\n\n<ul><li><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/axios\" rel=\"noreferrer noopener\">axios<\/a>: &nbsp;A promise-based HTTP client for making API requests.<\/li><li><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/dotenv\" rel=\"noreferrer noopener\">dotenv<\/a>: A module for loading separately stored environmental variables.<\/li><li><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/express\" rel=\"noreferrer noopener\">express<\/a>: &nbsp;A Node JS application framework &#8211; this will be used extensively in our server.<\/li><li><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/sirv-cli\" rel=\"noreferrer noopener\">sirv-cli<\/a>: A lightweight CLI program used to server static sites. This gets auto-installed when you create a new Svelte app.<\/li><li><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/stripe\" rel=\"noreferrer noopener\">stripe<\/a>: &nbsp;A wrapper for Stripe\u2019s API.<\/li><\/ul>\n\n\n\n<p><em>Note: A basic prerequisite for this tutorial is to have Node installed in your machine. If you haven\u2019t done that, you can do so <\/em><a target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"noreferrer noopener\"><em>here<\/em><\/a><\/p>\n\n\n\n<p><br>Before installing dependencies, create your app by kickstarting the Svelte create-app &nbsp;command in your terminal:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n# create a new Svelte project named \"svelte-store\"\nnpx degit sveltejs\/template svelte-store\n\n# navigate into the folder of the newly created project\ncd svelte-store\n\n# install all dependencies in your local \"node_modules\" folder\nnpm install\n\n# deploy your application on a localhost server\nnpm run dev<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>At this point, you should see a starter web page in your browser when you navigate to <code>localhost:8080<\/code><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-1024x624.png\" alt=\"\" class=\"wp-image-2069\" srcset=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-1024x624.png 1024w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-300x183.png 300w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-768x468.png 768w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-1536x936.png 1536w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-125533-2048x1249.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Building_a_Node_server\"><\/span>Building a Node server<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The next step is to create a server that handles the requests we\u2019ll make to Reloadly\u2019s and Stripe\u2019s APIs for gift card data fetching and purchases respectively.&nbsp;<\/p>\n\n\n\n<p><br><em>Before we go further, take a few moments to sign up for a Reloadly and Stripe account so you can get an access token and secret key respectively. Below are links to short, straightforward guides that show you how to do this:<\/em><\/p>\n\n\n\n<ul><li><a target=\"_blank\" href=\"https:\/\/docs.reloadly.com\/giftcards\/authorization\/getting-your-access-token\" rel=\"noreferrer noopener\"><em>Signing up with Reloadly<\/em><\/a><\/li><li><a target=\"_blank\" href=\"https:\/\/dashboard.stripe.com\/register\" rel=\"noreferrer noopener\"><em>Signing up with Stripe<\/em><\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Once you\u2019re done getting the access token and secret key, navigate to your project\u2019s folder in your terminal and install the list of dependencies mentioned earlier:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios dotenv express stripe<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, in the root folder of your project create an &nbsp;<code>.env<\/code> file to protect your sensitive credentials ( access token and secret key ) from being visible alongside your code. In this file, add your access token and secret key and assign them to variables.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>.env\n\nSTRIPE_KEY='YOUR_SECRET_KEY_HERE'\nRELOADLY_TOKEN='Bearer YOUR_ACCESS_TOKEN_HERE'<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, create a &nbsp;<code>server.js<\/code> &nbsp;file at the root folder of your project. Begin your server with importing (requiring) all the dependencies you have installed:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ .\/server.js\n\nrequire('dotenv').config();\nconst express = require(\"express\");\nconst app = express();\nconst axios = require(\"axios\");\nconst stripe = require(\"stripe\")(process.env.STRIPE_KEY);\nconst accessToken = process.env.RELOADLY_TOKEN<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Let\u2019s start with fetching data from Reloadly\u2019s gift card API &#8211; create a bunch of variables to handle the request and response data:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/server.js\n\n...\n\nconst url = \"https:\/\/giftcards.reloadly.com\/products\/120\";\nconst headers = {\n  Accept: \"application\/com.reloadly.giftcards-v1+json\",\n  Authorization: accessToken,\n};\nlet giftCardsData;\nlet giftCardsAmount;\n\n...<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, define a route handler that will enable users of our app to make a &nbsp;GET &nbsp;request to Reloadly\u2019s API<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/server.js\n\n...\n\napp.get(\"\/giftcards\", (req, res) => {\n  axios\n    .get(url, { headers: headers })\n    .then((response) => {\n      giftCardsData = response.data;\n      giftCardsAmount = giftCardsData.fixedRecipientDenominations&#91;0] * 100\n      res.send({\n        success: true,\n        data: giftCardsData,\n      });\n    })\n    .catch((error) => {\n      res.send({\n        success: false,\n        data: error,\n      });\n    });\n});\n\n...<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In the code snippet above, a request is made via Axios to Reloadly\u2019s API and the API\u2019s response is assigned to an existing variable. Pay attention to the response parameter fixedRecipientDenominations &nbsp;&#8211; this is the price of each gift card and it is iterated through and multiplied by 100 to prevent Stripe\u2019s API from displaying it in cents.<br>After this, create a second route handler that will enable our users to make a &nbsp;POST &nbsp;request to Stripe\u2019s API when purchasing a gift card.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/server.js\n\n...\n\napp.post(\"\/create-checkout-session\", async (req, res) => {\n  const session = await stripe.checkout.sessions.create({\n    line_items: &#91;\n      {\n        price_data: {\n          currency: giftCardsData.recipientCurrencyCode,\n          product_data: {\n            name: giftCardsData.productName,\n          },\n          unit_amount: giftCardsAmount,\n        },\n        quantity: 1,\n      },\n    ],\n    mode: \"payment\",\n    success_url: \"https:\/\/www.reloadly.com\/\",\n    cancel_url: \"https:\/\/twitter.com\/fullstackmafia\",\n  });\n  res.redirect(303, session.url);\n});\n\n...<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In the above code snippet, a request is made to Stripe\u2019s API to create a checkout session with details of the gift card\u2019s product. After each payment session is made, we can either redirect the user to a page with a successful message (success_url) &nbsp;or a failed one (cancel_url). Since this is a demo, I used Reloadly\u2019s home page as the successful message and my Twitter account the failed message &nbsp;<img decoding=\"async\" src=\"https:\/\/paper.dropboxstatic.com\/static\/img\/ace\/emoji\/1f609.png?version=6.0.0\" alt=\"winking face\" style=\"width: 15px\"><br>Lastly, configure your server to make files from the public folder in your project accessible via HTTP requests. Also, set a GET route handler to the root of your app and connect your app to your localhost server via Express\u2019 &nbsp;<code>app.listen()<\/code> &nbsp;function. These are detailed in the code snippet below:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ .\/server.js\n\n...\n\napp.use(express.static(\"public\"));\napp.get(\"*\", (req, res) => {\n  res.sendFile(path.resolve(__dirname, \"public\", \"index.html\"));\n});\napp.listen(5000, () => {\n  console.log(\"Server is up at port 5000\");\n});<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>There! You\u2019ve got your server all up and set. You can confirm your server works by kickstarting it in your terminal with the command below:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>node server.js<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This should start your server and you should see the confirmatory message you specified in the &nbsp;<code>app.listen()<\/code> &nbsp;function:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code># Server is up at port 5000<\/code><\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Building_a_Svelte_component\"><\/span>Building a Svelte component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once the server is up and running, our next step is to work on creating a Svelte component that displays the gift card as well as the checkout page to our users. In the &nbsp;<code>\/src<\/code> &nbsp;folder of your app, open the &nbsp;<code>App.svelte<\/code> &nbsp;file and delete the existing template.&nbsp;<br>For starters, we\u2019ll define an object that handles the state of our app during the duration of an API request &#8211; from the point a request is made to fetch gift cards till a response is gotten from Reloadly\u2019s API. Let\u2019s start this by creating an object in our component:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ .\/src\/App.svelte\n\n&lt;script>\n  let buju = {\n    productName: undefined,\n    loading: false,\n  };\n\n  ...\n&lt;\/script><\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, we\u2019ll specify a variable to handle the gift card data we\u2019ll be getting from our server. We\u2019ll also create an async function to handle our loading state and fetch the gift card data from our server:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/src\/App.svelte\n\n&lt;script>\n ...\n\n  let results;\n  async function getGiftCards() {\n    buju.loading = true;\n    try {\n      const returnValue = await fetch(\"\/giftcards\");\n      const response = await returnValue.json();\n      results = response.data;\n      buju = {\n        productName: results.productName,\n        loading: false,\n      };\n    } catch (error) {\n      console.error(error);\n    }\n  }\n&lt;\/script><\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Now we\u2019ve defined the logic for our Svelte component, let\u2019s complete the display by rendering &nbsp;our welcome message using HTML wrapped with Svelte\u2019s  <code>main<\/code> &nbsp;tag:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/src\/App.svelte\n\n... \n&lt;main>\n  &lt;div>\n    &lt;p>GET ALL THE CALL OF DUTY GIFT CARDS &lt;br> YOU WANT HERE!&lt;\/p>\n    &lt;button class=\"search_button\" on:click=    {getGiftCards}>SEARCH&lt;\/button>\n  &lt;\/div>\n&lt;\/main><\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, we\u2019ll use Svelte\u2019s &nbsp;<code>if\/else<\/code> &nbsp;block to display the response we\u2019ll get from our server. Here, we\u2019ll create ample scenarios for when the gift card data is being fetched:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/src\/App.svelte\n\n... \n&lt;main>\n  &lt;div>\n    &lt;p>GET ALL THE CALL OF DUTY GIFT CARDS &lt;br> YOU WANT HERE!&lt;\/p>\n    &lt;button class=\"search_button\" on:click={getGiftCards}>SEARCH&lt;\/button>\n  &lt;\/div>\n  &lt;div>\n     {#if buju.loading === true}\n        &lt;p>Loading giftcards...&lt;\/p>\n     {:else if buju.productName !== undefined }\n        &lt;div class=\"results\">\n          &lt;img class=\"product_image\" src=\"{results.logoUrls&#91;0]}\" alt=\"gift card images\" width=\"200px\"\/>\n          &lt;p class=\"redeem_instructions\">Redeem Instructions: {results.redeemInstruction.verbose}&lt;\/p>\n          &lt;p class=\"price\">Price: {results.fixedRecipientDenominations&#91;0]} USD&lt;\/p>\n          &lt;form action=\"\/create-checkout-session\" method=\"POST\">\n              &lt;button class=\"search_button\" type=\"submit\">BUY NOW&lt;\/button>\n          &lt;\/form>\n        &lt;\/div>\n    {\/if}\n  &lt;\/div>\n&lt;\/main><\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Now we\u2019re done, one last thing &#8211; we need to change how we compile and load our Svelte app by loading it from the server. In the &nbsp;<code>package.json<\/code> &nbsp;file of your app, change the &nbsp;start &nbsp;property in the &nbsp;<code>scripts<\/code> &nbsp;object from &nbsp;<code>sirv public --no-clear<\/code> &nbsp;to &nbsp;<code>node server.js<\/code>:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ .\/ package.json\n\n... \n\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"dev\": \"rollup -c -w\",\n    \"start\": \"node server.js\"\n  }\n\n...<\/code><\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Purchasing_a_Gift_Card\"><\/span>Purchasing a Gift Card<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Looks like we\u2019re good to go! Let\u2019s save all our files and in our terminal, navigate to our app\u2019s folder and run the &nbsp;<code>npm run dev<\/code> &nbsp;command. <\/p>\n\n\n\n<p>As specified in the server, &nbsp;our app\u2019s development environment should be live on port <code>5000<\/code>. Let\u2019s launch the app and attempt to make a gift card purchase:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"svelte nodejs store demo\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/YdjVTTBT-Z0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In the above video, we can see how our app works when I purchased a CALL OF DUTY gift card from the data rendered from Reloadly\u2019s gift card API, completed the order via Stripe\u2019s checkout session, and was redirected to Reloadly\u2019s homepage as proof that my order was successfully completed. To confirm this, below is a screenshot from my Stripe account showing the purchase:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-1024x518.png\" alt=\"\" class=\"wp-image-2070\" srcset=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-1024x518.png 1024w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-300x152.png 300w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-768x388.png 768w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-1536x777.png 1536w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-140621-2048x1036.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Additional_Challenges\"><\/span>Additional Challenges<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Building on our current app, we can explore the possibility of returning data on multiple gift cards via Reloadly\u2019s <a target=\"_blank\" href=\"https:\/\/docs.reloadly.com\/giftcards\/products\/get-all-products\" rel=\"noreferrer noopener\">Get all products<\/a> gift card endpoint and paying for them via different checkout sessions for each respective product.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Working with Stripe and Node JS to build full-stack applications is awesome as it enables you to expand your learning curve and explore JavaScript using a different approach. Like to take a look at the code? you can find it <a target=\"_blank\" href=\"https:\/\/github.com\/fullstackmafia\/svelte-stripe-store\" rel=\"noreferrer noopener\">here on GitHub<\/a>. If you\u2019ve got any suggestions or thoughts to share, I\u2019ll be in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how you can leverage Svelte &#8211; a JavaScript framework and Node JS to build full stack applications.<\/p>\n","protected":false},"author":17,"featured_media":2082,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[271,295,324,313,275,326,325],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs - Reloadly<\/title>\n<meta name=\"description\" content=\"Get started on building full-stack JavaScript applications in this guide that combines Svelte and Node JS to build a gift card store\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs - Reloadly\" \/>\n<meta property=\"og:description\" content=\"Get started on building full-stack JavaScript applications in this guide that combines Svelte and Node JS to build a gift card store\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\" \/>\n<meta property=\"og:site_name\" content=\"Reloadly\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-20T09:42:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-20T11:13:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/dev-blog3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"641\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\",\"name\":\"Reloadly\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/11\/logo-1.svg\",\"width\":100,\"height\":100,\"caption\":\"Reloadly\"},\"image\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#website\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"name\":\"Reloadly\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.reloadly.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2022\/01\/dev-blog3.png\",\"width\":641,\"height\":334,\"caption\":\"giftcard-image-svelte-javascript\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#webpage\",\"url\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\",\"name\":\"Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs - Reloadly\",\"isPartOf\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#primaryimage\"},\"datePublished\":\"2022-01-20T09:42:28+00:00\",\"dateModified\":\"2022-01-20T11:13:36+00:00\",\"description\":\"Get started on building full-stack JavaScript applications in this guide that combines Svelte and Node JS to build a gift card store\",\"breadcrumb\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\",\"url\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/\",\"name\":\"Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/2400042054e3b3009489e487224a6984\"},\"headline\":\"Building a gift card store with Svelte, Node JS, Reloadly and Stripe APIs\",\"datePublished\":\"2022-01-20T09:42:28+00:00\",\"dateModified\":\"2022-01-20T11:13:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#primaryimage\"},\"keywords\":\"gift card api,javascript,nodejs,payments,reloadly,stripe,svelte\",\"articleSection\":\"Developer Blog\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.reloadly.com\/blog\/building-a-gift-card-store-with-svelte-node-js-reloadly-and-stripe-apis\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/2400042054e3b3009489e487224a6984\",\"name\":\"Raphael Ugwu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/656844c0101d37e5695eee915ed3a49d?s=96&d=mm&r=g\",\"caption\":\"Raphael Ugwu\"},\"url\":\"https:\/\/blog.reloadly.com\/blog\/author\/fullstackmafia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","authors":[{"term_id":359,"user_id":17,"is_guest":0,"slug":"fullstackmafia","display_name":"Raphael Ugwu"}],"_links":{"self":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/2068"}],"collection":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/comments?post=2068"}],"version-history":[{"count":11,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/2068\/revisions"}],"predecessor-version":[{"id":2084,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/2068\/revisions\/2084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/media\/2082"}],"wp:attachment":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/media?parent=2068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/categories?post=2068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/tags?post=2068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}