{"id":263593,"date":"2018-01-16T08:19:55","date_gmt":"2018-01-16T15:19:55","guid":{"rendered":"http:\/\/css-tricks.com\/?p=263593"},"modified":"2018-01-19T08:54:27","modified_gmt":"2018-01-19T15:54:27","slug":"creating-vue-js-serverless-checkout-part-one","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-one\/","title":{"rendered":"Creating a Vue.js Serverless Checkout Form: Setup and Testing"},"content":{"rendered":"

There comes a time in any young app\u2019s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we\u2019ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application. This may sound daunting, but it\u2019s actually pretty straightforward! Let’s dig in.<\/p>\n

<\/p>\n

\"Vue<\/figure>\n
\n

Article Series:<\/h4>\n
    \n
  1. Setup and Testing<\/a> (This Post)<\/li>\n
  2. Stripe Function and Hosting<\/a><\/li>\n
  3. Application and Checkout Component<\/a><\/li>\n
  4. Configure the Checkout Component<\/a><\/li>\n<\/ol>\n<\/div>\n
    \n

    What is Serverless?<\/h3>\n

    We\u2019ve covered serverless concepts<\/a> before but, in case you haven\u2019t read that article, let\u2019s talk for a minute about what we mean by “serverless\u201d because it\u2019s a bit of a misnomer.<\/p>\n

    The promise of serverless is to spend less time setting up and maintaining a server. You’re essentially letting the service handle maintenance and scaling for you, and you boil what you need down to functions that run certain code when a request is made. For this reason, people may refer to this as FaaS<\/abbr>. This is really useful because you pay for what you use, rather than a large container that you might not need in its entirety. You also primarily hunker down and focus just on the code you need to run instead of babysitting a server, which really appeals to a lot of people who\u2019d like to get up and running quickly.<\/p>\n

    But FaaS<\/abbr> isn’t always the right tool for the job. It’s really useful for small executions but, if you have processes that might hold up resources or a ton of computation, being able to communicate with a server as you normally do might be more efficient.<\/p>\n

    What we\u2019re going to make is a perfect use case for going serverless. Stripe checkouts are pretty seamless to integrate on both the client and server side, but we do actually need to execute some logic on the server, so we\u2019ll use Azure<\/a> to help us with this. The portal and Github integration are pretty quick to manipulate, as long as you know where to go. So by all means, let\u2019s make it happen!<\/p>\n

    Sign up for Stripe<\/h3>\n

    First, we\u2019ll create a Stripe<\/a> account. We verify our new account via email and then we\u2019ll head over to the API section, where we can retrieve two keys. You\u2019ll note that we\u2019re in test mode right now, which is good! We\u2019ll keep it like that for testing, and unveil the testing key token to use while we set up the application. <\/p>\n

    Once you’re signed in, go to the API section of your dashboard to retrieve your key.<\/p>\n

    \"Stripe
    The Stripe API screen<\/figcaption><\/figure>\n

    You may also want to add a phone number to your account<\/a> for 2 factor auth as well.<\/p>\n

    Setting up Our Serverless Function in the Azure Portal<\/h3>\n

    First, we\u2019ll head over to the portal<\/a>, (or if you don’t already have an account, you can sign up for a free trial here<\/a>) and select New > Serverless Function<\/p>\n

    \"New
    Setting up a new Servless Function in Azure<\/figcaption><\/figure>\n

    When we click on the Serverless Function app, we\u2019ll be taken to a panel that asks for details to help with the setup. As you can see in the screenshot above, it will autofill most of the fields just from the app name, but let’s go over some of these options quickly:<\/p>\n