Vue Embedded Form

• Installation
  • Installation with Yarn
  • Installation with NPM
• Usage
  • Component as HTML
  • Component as Pug
• Configuration

Installation

Add the next package to your library:

With Yarn

yarn add @lyracom/vue-embedded-form

With NPM

npm install --save @lyracom/vue-embedded-form

Usage

You can add a form to any Vue2 application as follows:

// Import the library and get the plugin for Vue2
import LyraForm from "@lyracom/vue-embedded-form"

//define component setup options
const setup = {
    'kr-client-domain': 'https://api.payzen.eu',
    'kr-theme': "classic",
    'kr-public-key': '69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5'
};

Vue.use(LyraForm, setup);

Now, you can add the component to your Vue views or components as:

With HTML

<lyra-form kr-form-token="DEMO-TOKEN-TO-BE-REPLACED"
           kr-language="es-ES"
           kr-post-url-success="paid.php">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
</lyra-form>

With Pug

lyra-form(
    kr-form-token="DEMO-TOKEN-TO-BE-REPLACED"
    kr-language="es-ES"
    kr-post-url-sucess="paid.php"
)
    // payment form fields
    .kr-pan
    .kr-expiry
    .kr-security-code

    // payment form submit button
    .kr-payment-button

    // error zone
    .kr-form-error

Example

Example | Description ------------------------------------ | --------------------------------------------------- minimal | a minimal example using vue-cli pre-loaded | pre-load the payment form to get it as fast as possible

Parameters

The allowed configuration parameters are:

Parameter | Description | Setup | Template | Runtime | -------------------------------------|--------------------------------------------------------------|:--------:|:---------:|:--------:| kr-client-domain | Sets the endpoint of the library | ✓ | ❌ | ❌ | kr-public-key | Public key used for the payment | ✓ | ❌ | ❌ | kr-language | Language used on the payment form | ✓ | ✓ | ✓ | kr-post-url-success | The URL to POST on successfull payment | ✓ | ✓ | ✓ | kr-post-url-refused | The URL to POST on failed payment | ✓ | ✓ | ✓ | kr-clear-on-error | Disable the security code cleaning after a failed payment | ✓ | ✓ | ✓ | kr-hide-debug-toolbar | Disables the toolbar (only visible for test public keys) | ✓ | ✓ | ✓ | kr-placeholder-expiry | Changes the default placeholder of the expiry field | ✓ | ✓ | ✓ | kr-placeholder-pan | Changes the default placeholder of the pan field | ✓ | ✓ | ✓ | kr-placeholder-security-code | Changes the default placeholder of the security code field | ✓ | ✓ | ✓ | kr-popin | If true, payment form is displayed inside a pop-in | ✓ | ✓ | ❌ | kr-popin-button | If true, the library generates a popin button | ❌ | ✓ | ❌ | kr-form-id | Sets the form ID | ❌ | ✓ | ❌ |

setup parameters

All the Parameters are configurable on the setup step adding the value on the corresponding key as the next example:

// Import the library and get the plugin for Vue2
import LyraForm from "@lyracom/vue-embedded-form"

// Configure your endpoint of payment
const setup = {
    'kr-client-domain': 'https://api.payzen.eu',
    'kr-post-url-success': '/post-result',
    'kr-public-key': '69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5',
    'kr-theme': "classic",
    (...)
};

Vue.use(LyraForm, setup);

template parameters

All the Parameters enabled for templates are configurable on the template step adding the value on the corresponding HTML attribute on the lyra-form component as the next example:

<lyra-form
    kr-placeholder-pan="My pan!"
    kr-hide-debug-toolbar="true"
    kr-post-url-success="/my-post"
    ...
    >
    ...
</lyra-form>

Runtime parameters

All the Parameters enabled for runtime are configurable on the runtime calling the next KR setFormConfig library method:

KR.setFormConfig({
    "kr-post-url-success": "/my-post",
    "kr-placeholder-expiry": "My expiration date",
});

Themes

The theme property can be configured on the setup object argument of the LyraForm plugin. Available themes are:

• classic
• material

If no theme is configured, no CSS will be applied to the final form.