@paycore/merchant-widget-js NPM

##An client third-party inteface to init and render Mechant HPP to an a clint page with custom options.

#Initializing iframe on page.

Get iframe widget from CDN.

<script src="https://unpkg.com/@paycore/merchant-widget-js@0.2.2/dist/merchantWidget.umd.min.js"></script>

Init widget on your client page:

window.widget.init({
  selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
  flow: "iframe",
  public_key: "YOUR_PUBLIC_KEY",
  amount: "AMOUNT_OF_INVOICE",
  currency: "USD",
  baseUrl: "URL_OF_YOUR_HPP",
});

Parameters

options Object Required
options.selector String Selector on client page you wnat insert iframe to. Required.
options.flow String Widget supports 2 ways to initalize HPP - in the iframe or in blank page. To Open widget in the iframe, you need pass iframe flow, or redirect for open in new browser tab;
options.public_key String Commerce account PUBLIC API_KEY Required
options.baseUrl String Base endpoint to HPP that will be initialized in the iframe. Required
options.currency String The currency of the invoice (3-letter ISO 4217 code). Must be a commerce-account supported currency. Required.
options.amount Number The amount of payment invoice

HPP Layout config

You can set which elements of our HPP you want to hide. To do this, you need set true Boolean value;

options.display Object HPP layout config.
options.display.hide_footer Boolean
options.display.hide_header Boolean
options.display.hide_progress_bar Boolean
options.display.hide_method_filter Boolean
options.display.hide_lifetime_counter Boolean

HPP Styling config

You can set custom variables to styling your HPP. Some of variables will be generated automatically based on their related colors values. For example, if you will pass dark accent color (options.style.primary) then primary_variant and on_primary_color variables will be generated for the best user readabilyty.

options.style Object HPP Styling config.
options.style.theme String One of presetted themes ( 'basic' or 'dark').
options.style.primary Object Primary/Accent color
options.style.primary_variant Object - Based on primary color, or can be passed by you. If primary color will be dark - then this variable will be lighter. Used on most important UI components (stepper,buttons)

Customer info

If customer data is provided, it will be passed in the payment processing request.

options.customer.reference_id String Unique identifier of the customer. Must always have to be in the customer data object
options.customer.email Boolean Customer email (Optional)
options.customer.name Boolean Customer name (Optional)
options.customer.phone Boolean Customer phone (Optional)
options.customer.metadata Object Key-value map to provide additional user info (Optional)
options.customer.address Object User address information (Optional)
options.customer.address.country String Customer country (Optional)
options.customer.address.city String Customer city (Optional)
options.customer.address.post_code String Customer post code (Optional)
options.customer.address.region String Customer region (Optional)
options.customer.address.street String Customer street (Optional)
options.customer.address.full_address String Customer full address (Optional)