7. Custom styling the Web-Components

Web-Components are the most convenient way to integrate functionalities in your application. Like any other UI elements in your application we provide simple ways to style these Web-Components so they become part of your application for a seamless user experience.

Below you will find examples in some popular frontend frameworks.

The library must be loaded before custom styling can be used in your application. To enable the library, please refer to our guide Loading the frontend library.

For a complete list of customizable style elements please refer to our guide JS Client Library Properties and Styling section.

React

Step 1. Install the npm package

npm install payengine

Step 2. Create CSS module file for your component (MyComponent.module.css)

Important: CSS Modules are turned on for files ending with .module.css extension. This is required for styling to function properly.

/*
    MyComponent.module.css
*/

.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}

Step 3. Import and apply styles in your React component

/*
    MyComponent.js
*/

import { loadPayengine, payengineStyles } from "payengine";
import overrideStyle from "MyComponenet.module.css";

const MyComponent = () => {

    useEffect(() => {
        // Load Payengine on first render only
        loadPayengine({
            publicKey: <your PAYENGINE_PUBLIC_KEY>,        
        }).then((pe) => {
            // Your sucess handler goes here.
        });  
    }, []);
 
    return (
    <>
    <pay-engine 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>"
      styleModule={{payengineStyles(overrideStyle)}}>
    </pay-engine>        
    </>
    )   
}

Vue.js

With Vue.js we have two options available and you can choose what best fits your application architecture.

Step 1. Install the npm package

npm install payengine

Step 2. Create modular <style> in your component and apply to Web-Component

Option1 - Via style module within your .vue file

/*
    MyComponent.vue
*/

<template>
<div>
    <pay-engine 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>">
      :styleModule="payengineStyles(payengineOverrides)"
    </pay-engine>        
</div>
</template>

<script>
import { loadPayengine, payengineStyles } from "payengine";

export default {
    name: "MyComponent",
    methods: {
        payengineStyles
    },
    created() {    
        try {
             loadPayengine({
                publicKey: <your PAYENGINE_PUBLIC_KEY>,
            });
        } catch (e) {
            // error handling
        }
    }
}

</script>

<style>
/*
    Your Vue.js component's style
*/
</style>

<style module="payengineOverrides">
.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}
</style>

Option 2 - CSS module file for your component (MyComponent.module.css)

Important: CSS Modules are turned on for files ending with .module.css extension. This is required for styling to function properly if you decide to use this option.

1. Create MyComponent.module.css

/*
    MyComponent.module.css
*/

.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}

2. Create MyComponent.vue

/*
    MyComponent.vue
*/

<template>
<div>
    <pay-engine 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>">
      :styleModule="payengineStyles(payengineOverrides)"
    </pay-engine>        
</div>
</template>

<script>
import { loadPayengine, payengineStyles } from "payengine";
import payengineOverrides from "MyComponenet.module.css";

export default {
    name: "MyComponent",
    methods: {
        payengineStyles
    },
    created() {    
        try {
             loadPayengine({
                publicKey: <your PAYENGINE_PUBLIC_KEY>,
            });
        } catch (e) {
            // error handling
        }
    }
}

</script>

<style>
/*
    Your Vue.js component's style
*/
</style>