Initialize HelcimPay.js

Perform an API call to https://api.myhelcim.com/v2/helcim-pay/initialize to get the checkoutToken and secretToken.

fetch('https://api.myhelcim.com/v2/helcim-pay/initialize', payload)
  .then(response => console.log(response))
  .catch(err => console.error(err));

Read more in HelcimPay.js Initialization. Refer to the developer documentation for more interactive examples.

Render the HelcimPay.js modal

Add the HelcimPay.js <script> tag in the HTML header.

<script async defer type="text/javascript" src="https://secure.helcim.app/helcim-pay/services/start.js"></script>

Call the appendHelcimPayIframe with the checkoutToken

<a href="javascript: appendHelcimPayIframe(checkoutToken)">
  Pay Now
</a>

Read more in HelcimPay.js Implementation.

Validate the transaction response

Listen to the iFrame's event.

window.addEventListener('message', (event) => {

  const helcimPayJsIdentifierKey = 'helcim-pay-js-' + checkoutToken;

  if(event.data.eventName === helcimPayJsIdentifierKey){

    if(event.data.eventStatus === 'ABORTED'){
      console.error('Transaction failed!', event.data.eventMessage);
    }

    if(event.data.eventStatus === 'SUCCESS'){
      validateResponse(event.data.eventMessage)
        .then(response => console.log(response))
        .catch(err => console.error(err));
    }

  }

});

function validateResponse(eventMessage) {
  const payload = {
    'rawDataResponse': eventMessage.data,
    'checkoutToken': checkoutToken,
    'secretToken': secretToken
  };
  
  return fetch('https://example.example.com/your-endpoint', payload);
}

Validate that the hash from the response is the same as the hashed response data.

public function validateHash(array $rawDataResponse, string $secretToken, string $expectedHash) {
  $encodedData = json_encode($rawDataResponse);
  $hashedResponse = hash('sha256', $encodedData . $secretToken);
  return $hashedResponse === $expectedHash;
}