Guides
helcim.com

Overview of HelcimPay.js

Overview

HelcimPay.js allows you to embed payments into your website or application without handling sensitive payment information, using a single API call.

With our prebuilt payment modal, HelcimPay.js enables you to easily accept payments or verify and tokenize payment details. It is the ideal solution for developers looking to implement a seamless payment experience while reducing their security and PCI-DSS compliance scope.

HelcimPay.js has access to a broad range of features and functionality, including Helcim Fee Saver, multiple payment types and payment methods such as credit card or ACH payments, or creating new customers or invoices in the Helcim system using the details that you specify.

HelcimPay.js Use Cases

You can implement HelcimPay.js in a range of unique use cases, either in combination with custom integrations to the Helcim API, or as a stand alone payment solution for your existing website, application, or software.

Through HelcimPay.js, you can:

  • Process secure online credit card or ACH payments for your products and services, from your existing eCommerce website, or software.
  • Verify and tokenize payment details from your customers, then set them to default to be combined with the Helcim Recurring API, or to process payments later through the Payment API.
  • Preauthorize payment amounts in a secure manner, that can then be captured later through the Payment API.
  • Create itemized invoices through HelcimPay.js or the Invoice API, giving your customers control of paying invoices in full or partially across multiple payments.

HelcimPay.js Functionality

Integrating with HelcimPay.js and taking payments online is quick and easy. Simply initialize your HelcimPay.js checkout session, render the payment modal with your checkoutToken, then validate the transactions response after your customer processes their payment.

HelcimPay.js allows you to manage a range of features and functionality for your payment processing needs, all while keeping your customers payment details secure and reducing your businesses PCI DSS compliance scope.

Initialize

The HelcimPay.js initialize request is how you will create your HelcimPay.js checkout session and configure the unique features and functionality for your customers payment experience.

The initialize request creates a checkoutToken that controls a number of parameters that are rendered in the payment modal, including:

  • What payment type and payment method the customer is allowed to process payment with, including the amount and currency of the payment.
  • Whether the checkout session is linked to an existing customer or invoice, or whether you will use the customerRequest and invoiceRequest objects to create new ones on successful payment.
  • Whether you would like to use Helcim Fee Saver to pass on your credit card processing fees, or let your customer pay with ACH payment to reduce your processing costs.
  • Whether your customer is allowed to make partial payments for their invoice amount.
  • Whether you want to hide existing payment details stored in your Helcim card vault for that customer, or whether you want to set new payment details being used as the customers default moving forward.

Render

The HelcimPay.js JavaScript provides you access to render the payment modal within an iFrame overlaid on your website or application, so that your customers can process payment securely without payment details touching your website or server.

Through the HelcimPay.js JavaScript you have access to a range of functions, including:

  • The appendHelcimPayIframe() function that takes your checkoutToken as a parameter to render the payment modal for your checkout session.
  • The removeHelcimPayIframe() function that destroys the HelcimPay.js iFrame so that your customer can be redirected after their payment attempt, or continue from where they started.

Helcim Pay.js user interface illustration

Validate

After a payment has been successfully processed through HelcimPay.js, the iFrame will emit a payment response to the window element that can be captured and sent to your back-end for processing.

The HelcimPay.js validation process encompasses the following:

  • Capturing the HelcimPay.js transaction response using the window eventListener.
  • (Optional) Validating the Transaction Response Hash using a validateHash() function as an additional layer of security.

HelcimPay.js API Endpoints

Initialize

Create a HelcimPay.js checkout session using a single API call to control the features and functionality rendered in the payment modal, using the following endpoint.

Updated 7 days ago