<div id="checkout-container"></div>
body {
  margin: 0;
}
var Options = {
  options: {
    methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
    methods_disabled: [],
    card_icons: ['mastercard', 'visa', 'maestro'],
    active_tab: 'card',
    fields: false,
    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'
  }
}
var app = fondy("#checkout-container", Options)
  .$on("success", function(model) {
    console.log("success event handled");

    var order_status = model.attr("order.order_data.order_status");

    if (order_status == "approved") {
      console.log("Order is approved. Do somethng on approve...");
    }
  })
  .$on("error", function(model) {
    console.log("error event handled");
    var response_code = model.attr("error.code");
    var response_description = model.attr("error.message");
    console.log(
        "Order is declined: " +
          response_code +
          ", description: " +
          response_description
      );
  });

External CSS

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

External JavaScript

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