Product Widgets

Getting Started

1.- Set up widgets.js

Include the following script at the end of the body section on every page on your site. That script should always be loaded directly from
the kueskipay cdn (https://cdn.kueskipay.com).

Replace the following keys:

[authorization] Key provided by kueskipay.

[sandbox ] Enable or disable sandbox mode.
[integration] Your shop (shopify, magento, etc.)
[version] Version of the integration

<script id="kpay-advertising-script"
src="https://cdn.kueskipay.com/widgets.js?
authorization=123456789&sandbox=true&integration=shopify&version=v1.0">
</script>

<script type="">new KueskipayAdvertising().init()</script>

2.- Setup a product widget

To add a new widget in the page include the following html snippet with some attributes.

data-kpay-widget-amount Is the amount of the product multiplied by 100 to generate an amount without decimals. example
25.25 * 100 equals to: 2525.
Note: This attribute is optional.
data-kpay-widget-type Type of widget to be rendered in the page location.
Default: Product
Note: This attribute is optional.
data-kpay-widget-product-name Name of the product
Note: This attribute is optional.

<kueskipay-widget
data-kpay-widget-amount="25025"
data-kpay-widget-type="product"
data-kpay-widget-product-name="Bolsa color verde">
</kueskipay-widget>

The code above will show the below html:

Basic product widget customization

 This is a list of optional attributes to change the look and feel of the widget

Attribute

data-kpay-widget-font-size Change font size in integer numbers (12, 20) default: 12

data-kpay-widget-font-weight Change font weight (normal, bold, bolder) default: normal

data-kpay-widget-text-align Change text align (left, center, right) default: left

data-kpay-widget-logo-display Change logo display (image, text) default: image

data-kpay-widget-logo-color Change logo color (black, white) only apply if logo display is image

data-kpay-widget-link-color Change link color (red, green, 1C9CE2) default: 1C9CE2

data-kpay-widget-link-emphasis Change link font weight (normal, bold, bolder) default: bold

data-kpay-widget-trigger-text Change link text (Click me)

data-kpay-widget-installments-color Change installments text color (red, green) default: FD9900

data-kpay-widget-offer-color Change offer text color (red, green) default: black

data-kpay-widget-font-family Change font family default: "'Open Sans', sans-serif"

data-kpay-widget-color Change widget text color (red, green) default: black