gvt-checkout-modal v0.0.5

gvt-checkout-modal

This template should help get you started developing with Vue 3 in Vite.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Prerequisites

As an organization should have these mandatory parameters: API_URL, ORG_ID, PROVIDER_TENANT_ID, PROVIDER and replace in the follow javascript code

Implementation

Add file script and css in your html in head HTML:

<script type="module" crossorigin src="/gvt-checkout.js"></script>
<link rel="stylesheet" href="/assets/gvt-checkout.css">

Then

window.gvtApiUrl = "API_URL"
window.gvtOrgId = "ORG_ID"
window.gvtProviderTenantId = "PROVIDER_TENANT_ID"
window.chkProvider = 'PROVIDER';
window.nouncePayme = '';
window.webAppEmail = '';
window.checkoutConfig = { 
    partner: {
        "id": "",
        // Color primary brand
        "color": "#3AA644",
        // Color secondary brand
        "colorSecondary": "#53B0A9",
        // Background logo brand
        "colorLogoBg": "#f5f5f5",
        "colorSummary": "#2f2f2f",
        // Color buttons
        "colorButtonMain": "#3AA644",
        "colorButtonBack": "#5e5e5e",
        "colorButtonOption": "#2F2F2F",
        "colorIcons": "#9e9e9e",
        "billingEnable": true,
        "paymentEnable": true,
        "shippingEnable": true,
        "rememberEnable": false,
        "successEnable": true,
        "image": "Image URL",                
        // Is "true" to show checkout modal right away
        "autoOpen": false,
        // Is "true" to show UI in version desktop
        "versionDesktop": false,
        "ubigeoRule": {
            "countryIsoCode": "PER",
            "level1": {
            "label": "Departamento",
            "active": true
            },
            "level2": {
            "label": "Provincia",
            "active": true
            },
            "level3": {
            "label": 'Distrito',
            "active": true
            },
            
        },
        // If redirectSuccess is "true" because redirectSuccessUrl should have mandatory site URL 
        "redirectSuccess": true,
        "redirectSuccessUrl": "https://www.micarrito.com/"
    },
}
// Replace the first parameter of fn getCheckout with checkoutID 
function initCheckoutWidget () {
    window.ChkWidget.getCheckout('', window.checkoutConfig);
}

Additionally add this html

<button id="gvt-chk-button-container" class="btn btn-main bg-dark text-white">
    Procesar la Compra
</button>

<div id="gvt-chk-app"></div>