Joe8Bit

const express = require('express')
const app = express()

app.use(express.json())

app.post('/checkout', async function (req, res) {
  console.log(req.body)
  res.send({
    url: 'https://example.com'
  })

Joe8Bit

module.exports = {
	// -- snip
  serverMiddleware: [
    '~/server/api'
  ]
}

Joe8Bit

<div v-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-8 checkout-error" role="alert">
  <strong class="font-bold">Something went wrong!</strong>
  <span class="block sm:inline">Something went wrong checking you out, please try again</span>
</div>

Joe8Bit

export default {
	// -- snip
  data () {
    return {
      error: null
    }
  },
  // -- snip
  methods: {
    async checkout (cart, e) {

Joe8Bit

const cart = [{
  name: 'Nike Free Flynit',
  description: 'Ideal for runs up to 3 miles, the Nike Free RN Flyknit 3.0 delivers a lace-free design so you can slip in and hit your stride.',
  amount: 110,
  image: '/images/product-1.jpg',
  cartID: '45429317-eaf5-4c93-b0cd-bd2a8ffe26b0',
  quantity: 1
}]

Joe8Bit

// -- snip
async checkout (cart, e) {
  e.preventDefault()
  try {
    const res = await axios.post('/api/v1/checkout', cart, {
      timeout: 1000
    })
    global.location.replace(res.data.url)
  } catch (e) {
    console.log('Something went wrong', e)

Joe8Bit

import axios from 'axios'
// -- snip

export default {
  // -- snip
  methods: {
    checkout (cart, e) {
      e.preventDefault()
    }
  }

Joe8Bit

.btn-banked {
  @apply text-white text-xl;
  background: #000;
}

Joe8Bit

<button class="btn mt-4" @click="creditCartCheckout()">
  Checkout
</button>
<button class="btn btn-banked mt-4" @click="checkout(cart, $event)">
  Checkout with Banked :
</button>

Joe8Bit

<button class="btn mt-4" @click="creditCartCheckout()">
  Checkout
</button>