Adding the checkout component

To start the checkout process, you need to send data about the transaction to the /checkouts endpoint. For this app, we’ll create a Nuxt.js component to include on the index page. When a user clicks this button component, the following actions occur:

The merchant’s API key and ID are retrieved from the .env file.
The key and ID values are assigned to the relevant HTTP headers.
A checkout session is created.
The returned session data is used to redirect the user to the checkout page.

Create the component and add a button

Create a new file in the components directory named checkout.vue.
Open the new file in your editor.

The first part of the component is the <template>, a container for the <button>.
Add the following snippet to the file:
```
 <template>
   <button class="button--green">Pay</button>
 </template>
```
If you run the app at this point, the button appears but there is no action tied to it. To make it usable, we need to add code to initiate a checkout session.

Add the scripting code

In checkout.vue, add a <script> following the <template>.

 ...
 </template>
  
 <script>
    
 </script>

In the <script>, add an empty async method named startCheckoutSession().

 export default {
   methods: {
     async startCheckoutSession() {
          
     },
   },
 };

The checkout session request must be authenticated with the merchant’s hosted checkout API key. Add a variable named authKey to store this key.
```
 async startCheckoutSession() {
   let authKey = 'Bearer ' + this.$config.apiKey;

 },
```

The session request also requires the Clover merchant identifier (mId). Add another variable named mId for this value.

 async startCheckoutSession() {
   let authKey = 'Bearer ' + this.$config.apiKey;
   let mId = this.$config.mId;
 },

Set the HTTP headers using the variables created in the previous steps.

 ...
 let mId = this.$config.mId;
 this.$axios.setHeader('Authorization', authKey);
 this.$axios.setHeader('X-Clover-Merchant-ID', mId);

Add a try/catch statement with a window alert to display any error messages returned by the API.

 try {
        
   } catch (error) {
     window.alert(error);
 };

In the try block, set up the POST request by passing the /invoicingcheckoutservice/v1/checkouts as the first parameter.

 let checkoutSession = await this.$axios.$post('https://sandbox.dev.clover.com/invoicingcheckoutservice/v1/checkouts');

For the second parameter, add a JSON request body including the customer and shoppingCart objects.

 let checkoutSession = await this.$axios.$post('https://sandbox.dev.clover.com/invoicingcheckoutservice/v1/checkouts',
   {
     "customer": {
       "email": "email@example.com",
       "firstName" : "Example",
       "lastName": "Customer",
       "phoneNumber": "223-555-0002"
     },
     "shoppingCart": {
       "lineItems": [
         {
           "name": "Apple",
           "unitQty": 1,
           "price": 100
         },
         {
           "name": "Orange",
           "unitQty": 2,
           "price": 75
         }
       ]
     },
   },
 );

Once the endpoint returns a session ID, the user needs to be redirected to the checkout page. Do this by setting the window.location.href property to the value of the href returned by the /checkouts endpoint.
```
 try {
   let checkoutSession = await this.$axios.$post(
   ...
 );
 window.location.href = checkoutSession.href;
 } catch (error) {
     window.alert(error);
 }
```
The <script> now has the code required to complete a checkout session.
Add a click event listener to the <button> that will start the checkout process when the Pay button is clicked. The value of the @click attribute is the method name to invoke (startCheckoutSession).
```
 <button @click="startCheckoutSession"class=" button--grey">Pay</button>
```

You can now follow the steps in Running the app to build and serve the app locally.

Clover Hosted Checkout

Walkthrough