<div id="checkout-container"></div>
<script type="text/x-vue-template" id="f-fields">
  <div>
  <div class="f-block f-block-hr">
    <input-text name="custom_field_1" value="" validate="required" custom></input-text>
    <input-text name="custom_field_2" value="" validate="required" custom></input-text>
    <input-amount name="amount"></input-amount>
  </div>
</div>
</script>
body {
  margin: 0;
}
var Options = {
  options: {
    methods: ["card", "wallets"],
    methods_disabled: ["banklinks_eu", "local_methods"],
    card_icons: ["mastercard", "visa", "maestro"],
    active_tab: "card",
    lang: ["en", "fr"],
    fields: true,
    title: "Demo subscription checkout",
    link: "https://shop.com",
    full_screen: true,
    button: true,
    email: true,
    subscription: {
      type: "shown_readonly",
      periods: ["week", "month", "day"],
      readonly: true
    }
  },
  params: {
    merchant_id: 1396424,
    required_rectoken: "y",
    currency: "EUR",
    amount: 500,
    order_desc: "Demo subscription",
    recurring_data: {
      every: 1,
      amount: 1000,
      period: "month",
      end_time: "2026-11-14",
      start_time: "2019-11-11"
    }
  },
  messages: {
    en: {
      card_number: "Card number(en)",
      bic: "BIC(en)",
      card: "Pay by card(en)",
      custom_amount: "Amount(en)",
      custom_amount_description: "Order amount(en)",
      custom_field_1: "Full Name(en)",
      custom_field_2: "Contract number(en)",
      email: "User email(en)",
      expiry_date: "Expiry date(en)",
      fast: "Fast payment access(en)",
      iban: "IBAN(en)",
      ibank: "Internet banking(en)",
      ibank_t: "Choose your bank(en):",
      info: "Order description(en)",
      methods: "Payment methods(en)",
      month: "Month(en)",
      my_desc: "Test order(en)",
      my_email: "Email(en)",
      my_title: "Purpose of payment(en)",
      pay: "Pay(en)",
      other_payment_method: "Or pay with(en)",
      regular: "Subscription(en)",
      regular_amount: "Subscription amount(en)",
      regular_every: "Every(en)",
      regular_period: "Period(en)",
      regular_start_time: "Start from(en)",
      sender_name: "First Name(en)",
      week: "Week(en)",
      year: "Year(en)"
    },
    fr: {
      card_number: "Card number(fr)",
      bic: "BIC(fr)",
      card: "Pay by card(fr)",
      custom_amount: "Amount(fr)",
      custom_amount_description: "Order amount(fr)",
      custom_field_1: "Full Name(fr)",
      custom_field_2: "Contract number(fr)",
      email: "User email(fr)",
      expiry_date: "Expiry date(fr)",
      fast: "Fast payment access(fr)",
      iban: "IBAN(fr)",
      ibank: "Internet banking(fr)",
      ibank_t: "Choose your bank(fr):",
      info: "Order description(fr)",
      methods: "Payment methods(fr)",
      month: "Month(fr)",
      my_desc: "Test order(fr)",
      my_email: "Email(fr)",
      my_title: "Purpose of payment(fr)",
      pay: "Pay(fr)",
      other_payment_method: "Or pay with(fr)",
      regular: "Subscription(fr)",
      regular_amount: "Subscription amount(fr)",
      regular_every: "Every(fr)",
      regular_period: "Period(fr)",
      regular_start_time: "Start from(fr)",
      sender_name: "First Name(fr)",
      week: "Week(fr)",
      year: "Year(fr)"
    }
  },
  validate: {
    en: {
      credit_card: function (field) {
        return "Field " + field + " must be a valid curd number(en)";
      },
      custom_field_1: function (field) {
        return "Field " + field + " must be be filled(en)";
      },
      custom_field_2: function (field) {
        return "Field " + field + " must be be filled(en)";
      }
    },
    fr: {
      credit_card: function (field) {
        return "Field " + field + " must be a valid curd number(fr)";
      },
      custom_field_1: function (field) {
        return "Field " + field + " must be be filled(fr)";
      },
      custom_field_2: function (field) {
        return "Field " + field + " must be be filled(fr)";
      }
    }
  }
};
fondy("#checkout-container", Options);

External CSS

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

External JavaScript

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