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:
Parameter | Description |
---|---|
resources | A comma-delimited list of Preczn client-side resources which to include on your page. See Client Resources below for a list of accepted values. |
publicApiKey | Your public API key. |
merchantId | The 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 ID | Resource Description |
---|---|
paymentfields | PaymentFields secure client-side tokenization script. |
applepay | Apple Pay on the web secure client-side tokenization script. |
googlepay | Google 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>
- You add the
script
element for thepreczn.min.js
to your pagehead
element. - The
preczn.min.js
script subsequently, automatically;- Loads the
paymentfields.min.js
script with the appropriate parameters and a server-side validatedintegrity
SRI hash value. - Loads the
applepay.min.js
script with the appropriate parameters and a server-side validatedintegrity
SRI hash value.- The
applepay.min.js
script automatically loads the officialapple-pay-sdk.js
SDK from Apple.
- The
- Loads the
Updated about 1 month ago