<div id="checkout-container"></div>
<script type=text/x-vue-template id=f-fields>
<div class="f-block f-block-hr">
    <div class="row">
        <div class="custom form-group f-col-xs-6">
            <input-text name="custom_field_1" value="№666" validate="required" custom></input-text>
        </div>
        <div class="custom form-group f-col-xs-6">
            <input-text name="custom_field_2" validate="required|email" custom></input-text>
        </div>
         <div class="col-xl-12">
            <input-text name="custom_field_3" validate="required" custom></input-text>
        </div>
    </div>
</div>
</script>

html, body
  height: 100%
  margin: 0
  #f
    .f-block.f-block-hr .f-block-title
      margin-bottom 8px
    .f-container
      padding-bottom 20px
    .f-card-icon
      margin-top 20px
    .f-icon
      background-position: 50% 55%
      background-repeat: no-repeat
      background-size: 80%
      display: inline-block
    .custom
      margin-bottom 0
    .f-btn-block
    .f-dropdown-menu
      min-width: 180px
    .f-wrapper
      border-radius: 4px

var Options = {
  options: {
    methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
    methods_disabled: [],
    default_country: 'GB',
    card_icons: ['mastercard', 'visa', 'maestro'],
    active_tab: 'card',
    fields: true,
    title: 'Demo checkout',
    link: 'https://shop.com',
    full_screen: true,
    button: true,
    email: true
  },
  params: {
    merchant_id: 1396424,
    required_rectoken: 'y',
    currency: 'EUR',
    amount: 500,
    order_desc: 'Demo order'
  }
}
fondy("#checkout-container", Options);