HelcimPay.js Implementation Flows

HelcimPay.js can be used to process a range of payment types using different payment methods depending on your integrations unique needs.

The options below outline the potential integration and transaction flows created by different HelcimPay.js implementations, in addition to the required configurations and API endpoints to facilitate that flow.

📘

Creating your API Access Configuration

Regardless of how you implement HelcimPay.js, you will need to create an API Access Configuration in order to authenticate your Initialization requests to the Helcim API. Review our Create an API Access Configuration for steps on how to create your API token.

Purchase through HelcimPay.js

HelcimPay.js can be used to process Purchase transactions, using either credit card and / or ACH payment methods. This is a great option for integrating HelcimPay.js into a solution where you only need to accept payment for a one time amount.

The steps below outline the Purchase transaction flow through HelcimPay.js.

1. Integrate your website or applications secure back-end server with the HelcimPay.js Initialization endpoint.
2. Render the HelcimPay.js payment modal using the checkoutToken returned by your initialization request.
3. Customer processes payment in the HelcimPay.js payment modal using existing or new credit card or bank account details.
4. HelcimPay.js JavaScript sends the required payload for the Purchase transaction to the Helcim system to be processed and closes the HelcimPay.js iFrame after processing.
5. Helcim system returns the transaction response payload to the window object to be consumed by the merchant using an event listener, then displays a success or error message based on the outcome of the transaction.

Verify through HelcimPay.js + Purchase through Payment API

HelcimPay.js can be used to process Verify transactions using the credit card payment method. This is a great option for integrating HelcimPay.js into a solution where you need to verify and tokenize card details in advance, but will not process a payment until a later date.

The steps below outline the Verify transaction flow through HelcimPay.js.

1. Integrate your website or applications secure back-end server with the HelcimPay.js Initialization endpoint.
2. Render the HelcimPay.js payment modal using the checkoutToken returned by your initialization request.
3. Customer enters card details in the HelcimPay.js payment modal using new credit card details.
4. HelcimPay.js JavaScript sends the required payload for the Verify transaction to the Helcim system to be processed and closes the HelcimPay.js iFrame after processing.
5. Helcim system returns the transaction response payload to the window object to be consumed by the merchant using an event listener, then displays a success or error message based on the outcome of the transaction.
6. Store the cardToken returned in the transaction response in your system to be used through the Process Purchase Transaction endpoint in the Payment API when ready.

Pre-auth through HelcimPay.js + Capture through Payment API

HelcimPay.js can be used to process Pre-authorize transactions using the credit card payment method. This is a great option for integrating HelcimPay.js into a solution where you need to pre-authorize an amount up front, but could potentially capture a different amount at a later date.

The steps below outline the Pre-auth transaction flow through HelcimPay.js.

1. Create an API Access Configuration for your HelcimPay.js integration.
2. Integrate your website or applications secure back-end server with the HelcimPay.js Initialization endpoint.
3. Render the HelcimPay.js payment modal using the checkoutToken returned by your initialization request.
4. Customer processes payment in the HelcimPay.js payment modal using existing or new credit card details.
5. HelcimPay.js JavaScript sends the required payload for the Pre-auth transaction to the Helcim system to be processed and closes the HelcimPay.js iFrame after processing.
6. Helcim system returns the transaction response payload to the window object to be consumed by the merchant using an event listener, then displays a success or error message based on the outcome of the transaction.
7. Store the transactionId returned in the transaction response in your system to be used through the Process Capture Transaction endpoint in the Payment API within 7 days of the original pre-auth transaction.