<div>
  <div class='coll'>
    <div id="checkout-container"></div>
  </div>
  <div class='coll center'>
    <button id=submit>submit checkout form</button>
    <button id=go-ibank>go ibank</button>
    <button id=go-local>go local methods</button>
    <button id=go-card>go card</button>
  </div>
</div>
html {
  height: 600px;
}
body {
  height: 600px;
  margin: 0;
  overflow-y: scroll;
  font-family: 'Roboto', sans-serif;
}
.center {
  text-align: center;
  margin-top: 10px;
}
.center button{
    outline: none;
    text-decoration: none;
    box-sizing: content-box;
    text-transform: uppercase;
    font-weight: 700;
    border-style: solid;
    width: 176px;
    padding: 3px 11px;
    border-width: 10px;
}
.center button:hover {
    box-shadow: 0 5px 15px -2px rgba(0,0,0,.3)!important;
    cursor: pointer;
}
var Options = {
  options: {
    methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
    methods_disabled: [],
    card_icons: ['mastercard', 'visa', 'maestro'],
    title: 'Demo checkout',
    link: 'https://shop.com',
    full_screen: true,
    button: false,
    email: true
  },
  params: {
    merchant_id: 1396424,
    required_rectoken: 'y',
    currency: 'EUR',
    amount: 500,
    order_desc: 'Demo order'
  }
}

var app = fondy("#checkout-container", Options);

document.getElementById('submit').addEventListener('click', function () {
  app.submit()
})
document.getElementById('go-card').addEventListener('click', function () {
  app.location('card')
})
document.getElementById('go-ibank').addEventListener('click', function () {
  app.location('banklinks_eu')
})
document.getElementById('go-local').addEventListener('click', function () {
  app.location('local_methods')
})

External CSS

  1. https://pay.fondy.eu/latest/checkout-vue/checkout.css

External JavaScript

  1. https://pay.fondy.eu/latest/checkout-vue/checkout.js