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 namedcheckout.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 namedstartCheckoutSession()
.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
andshoppingCart
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 thehref
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.