Hosted JavaScript Clients

Preczn's dynamic hosted JavaScript client for payment pages.

Features and Functionality

Preczn securely hosts and provides several client-side browser scripts which simplify your integration and help to reduce your PCI scope. Simply include the following script on your payment page, in the head, element to access all of the secure payment page scripts Preczn has to offer!

<script fetchPriority="high" src="https://api.preczn.com/v1/clients/preczn.min.js?resources=paymentfields,applepay,googlepay&publicApiKey=2482re32338cd9z5048v7bhmb5&merchantId=mid_2zyd88xrnr90xskmjmqpd0x1vj"></script>

Query String Parameters

The resources loaded by preczn.min.js are dynamically composed depending upon the query string parameters provided in the URL:

ParameterDescription
resourcesA comma-delimited list of Preczn client-side resources which to include on your page. See Client Resources below for a list of accepted values.
publicApiKeyYour public API key.
merchantIdThe merchant ID for which your payment page is loaded.

Client Resources

The follow resources are available to load with the preczn.min.js JavaScript client:

Resource IDResource Description
paymentfieldsPaymentFields secure client-side tokenization script.
applepayApple Pay on the web secure client-side tokenization script.
googlepayGoogle Pay for web secure client-side tokenization script.

Secure and Compliant

As a recommended best practice, until Q2 2025 at which point PCI DSS v4.0.1 requirement 6.4.3 officially mandates, scripts executed in consumers' browsers are managed to ensure authorization, integrity, and justification. Due to the dynamic nature of Preczn's hosted JavaScript resources, we provide preczn.min.js to abstract and simplify loading of all dependencies and integrity validation.

To securely ensure the integrity of each script preczn.min.js implements Subresource Integrity (SRI), a security feature that enables browsers to verify that resources they fetch are delivered without unexpected manipulation. Based upon the provided query string parameters, preczn.min.js automatically adds secure script elements with SHA-512 SRI hashes to the head of your page.

Cache-busting

In order to help alleviate any resource caching concerns, preczn.min.js will automatically add an additional query string parameter with a value of the current Unix epoch timestamp (ts=1731474928081) as a browser cache-busting strategy.

Example

Below demonstrates example page source when preczn.min.js is implemented for PaymentFields and Apple Pay.

<script fetchpriority="high"
	src="https//api.preczn.com/v1/clients/preczn.min.js?resources=paymentfields,applepay&publicApiKey=2482re32338cd9z5048v7bhmb5&merchantId=mid_2zyd88xrnr90xskmjmqpd0x1vj"></script>
<script fetchpriority="high"
	integrity="sha512-Ub0kiZz4HE7vxh43h6z7GNPZEfvF0XQmMLH6RpEsudEeoW3/sEQkrCj7mztsEe4+dkbuXkBbRg+WZG+dKuxDSw=="
	crossorigin="anonymous"
	src="https://api.preczn.com/v1/clients/paymentfields.min.js?publicApiKey=2482re32338cd9z5048v7bhmb5&u=0&ts=1731474938081"></script>
<script fetchpriority="high"
	integrity="sha512-YVBVfM5XT2jRpwAaM4RulTpBjXgoDKD8ieUcVOwJ79YR9IX0QMSi+wAuoJdiKY1azEtI/UCDGqBAtUH1HobBGA=="
	crossorigin="anonymous"
	src="https://api.preczn.com/v1/clients/applepay.min.js?merchantId=mid_2zyd88xrnr90xskmjmqpd0x1vj&publicApiKey=2482re32338cd9z5048v7bhmb5&u=0&ts=1731474938081"></script>
<script fetchpriority="high" src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>
  1. You add the script element for the preczn.min.js to your page head element.
  2. The preczn.min.js script subsequently, automatically;
    1. Loads the paymentfields.min.js script with the appropriate parameters and a server-side validated integrity SRI hash value.
    2. Loads the applepay.min.js script with the appropriate parameters and a server-side validated integrity SRI hash value.
      1. The applepay.min.js script automatically loads the official apple-pay-sdk.js SDK from Apple.