iFrame
Last updated
Last updated
Enable iFrame from your PayHQ account
Generate your iFrame access token
Use this access token in your iFrame integration code
Request payment token for your transaction
Exchange the payment token to complete the transaction
Please make sure you have access to PayHQ Sandbox account
Go to or call 1 (800) 747-6883 and ask for a Payment Advisor to set up a Demo / Sandbox Account for you.
You can visit to see the iFrame in action. You can use the test card data mentioned on this page to complete a test transaction.
Stage 1 – Your team works on the integration work by using the Sandbox account
Stage 2 – After you finish your integration we will help you go through a certification process to make sure that your integration satisfies your end goal that you had for this integration.
Stage 3 – Request a production PayHQ account. Make sure you change all the URLs in your code to point to the production environment before you go live with your code.
Login to your merchant account
Click “Settings” on the top right menu
Select “Hosted Pay Page and iFrame” tab on settings page
At the top of the page that opens you will see the iFrame Settings
Click the create button on the right to generate your iFrame token
You will notice that the iFrame access token has been generated. You have an option to delete or refresh the access token as per your requirements
At this point you are ready to start writing your code to integrate iFrame into your web page.
Link the PayHQ iFrame Javascript library in the webpage where you will be adding the iFrame. The URL of this library for the test environment is https://test-iframe.payfirma.com/payhq-js/payhq-iframe-lib-test.min.js
Add three placeholder div elements in your webpage to hold the iFrames for card number, expiry date and CVV. At this point it’s important to know that PayHQ iFrame is not a single iFrame that you add to your webpage. It comprises three different iFrames, one each for card number, expiry date and CVV. This gives you more flexibility to design your UI the way you want to.
You may choose to provide any id of your choice to the three placeholder divs you added in step 2
The next step is to write Javascript code to initialize the iFrame in your webpage. (See example below)
At this point you should be ready to run your webpage and see the iFrame in action.
Step 4 - script tag
In the code shared above the payfirmaObject.tokenize()
is responsible for submitting the card details to PayHQ backend and receive a payment token.
The payment token received in the previous step can be used to complete the sale
Finally call the makeSaleRequest
method to complete the sale. This method will make an API call to PayHQ backend and complete the sale
The response of the final sale method contains the lookup ID of the transaction. This lookup ID should be saved for performing refund operations in future.
Sandbox –
Test –
Production –