Implementing the Embedded Client

PayNearMe’s JS library can be implemented in four easy steps with minimal API interaction.

1. Load the PayNearMe JS Library. This library initiates the embedded client, which is hosted and managed by PayNearMe. The client is displayed in either a named DOM element that you define or in a modal (overlay or side-drawer). Add this script to the bottom of your Checkout page in the applicable environments:

   Environment	Script
   Sandbox	<script src='https://www.paynearme-sandbox.com/api/cf/<site_identifier>/v1/ paynearme.js’>
   Production	<script src='https://www.paynearme.com/api/cf/<site_identifier>/v1/paynearme.js’>

2. Generate a Secure Smart Token via the /create_order or /get_smart_token API calls.
   Add the token to the library’s initialization script (PNM.init) along with any UI/UX customizations for the payment form. These customizations include the ability to define header color and size, supported actions (pay, disburse, tokenize), supported payment methods, disbursement limits, and the target container.

3. Use a button or link to invoke the JS library and the payment form in either a modal, drawer, or a DOM element where you want to insert the iframe.

4. As the consumer enters his/her data, the payment form sends real-time callbacks to a JS method you define when certain events, like errors, timeouts, or canceled payments occur.

5. After the consumer submits his/her data, the transaction is processed, and, if configured, PayNearMe sends Authorization and Confirmation callbacks to your server. You can configure the client to display in-app receipt language or redirect the app to a payment confirmation page you control.