Accept CARD payments through own payment page (JavaScript)
- Joseph De Jesus IV
This guide will allow you to incorporate the Payrix JavaScript library to your application to accept payments via Card. The JavaScript will tokenise the data on the page and can be used to either add the card details entered to an existing payer or it can be used to make a live (real-time) card transaction against the card details.
Lastly, processing a real-time card transaction.
Tokenised real-time card transaction with payment details saved to record
OR simply save card details to a payer record to charge payer at a later time/date.
If you have now saved the card data against the payer record you can process ongoing/recurring payments via the 2 methods below:
JavaScript steps - building your webpage
Including the JavaScript
In the <head> element of your webpage, add a <script> tag to include the JavaScript that is used to tokenise payment card details. For the following, replace {{api-url}} with either the sandbox (test) or production (live) URL for the REST API, as appropriate:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="{{api-url}}/js/tokenize-card"></script>
</head>Adding the <form> element
In the <body> element of your webpage, add a <form> tag to contain the elements used to accept payment card details from payers. The <form> tag must include a data-integrapay attribute with a value of PaymentForm to allow the imported JavaScript to identify this element.
After the JavaScript has tokenised the payment card details, the <form> will be submitted automatically. This can be used to trigger further actions; for example, causing the payer's web browser to navigate to the URL specified for the action attribute (for the following, replace {{action-url}} with your own URL):
<body>
<form data-integrapay="PaymentForm" method="POST" action="{{action-url}}">
</form>
</body>As well as tokenising the payment card details, the JavaScript will clear the elements used to accept the card number and security code (CCV/CVV) values. This helps to reduce your PCI compliance obligations by ensuring that your web server does not receive confidential information about payment cards.
Adding your business key
In the <form> element, add a hidden <input> tag to specify the BusinessKey of the organisation for which the payment card details are to be tokenised. The business key is a "public" identifier that allows the tokenisation to occur without prior authentication; the tokenised details can only be accessed with authentication and authorisation.
The <input> tag must include a data-integrapay attribute with a value of BusinessKey to allow the imported JavaScript to identify this element. For the following, replace {{business-key}} with the business key for the organisation:
<input data-integrapay="BusinessKey" type="hidden" value="{{business-key}}" />Please note the BusinessKey aka BusinessGUID can be obtained using the Check your business details call. This will change when changed over to the Live system.
PLEASE NOTE CCV cannot be captured for recurring payments. You can use the code below to hide the CCV input filed. CCV is still required for Live or “Real-Time” transactions, therefore you may need two input fields.
Adding a token placeholder
In the <form> element, add a hidden <input> tag as a placeholder for the token that is created when the JavaScript tokenises the payment card details. The <input> tag must include a data-integrapay attribute with a value of CardToken to allow the imported JavaScript to identify this element.
After the JavaScript has tokenised the payment card details, the value attribute of the <input> tag will contain the token for the card. To access the token, either specify an id attribute for the <input> tag and read it using your own JavaScript, or specify a name attribute to include the token as a parameter when the <form> is submitted, as follows:
Adding elements for card details
In the <form> element, add text <input> tags to accept cardholder name, card number and security code (CCV/CVV) values, and <select> tags to accept card expiry month and year values. For each of the <input> tags, include an autocomplete attribute with a value of off to help avoid the accidental storage of confidential information about payment cards, which in turn helps to reduce your PCI compliance obligations.
The <input> and <select> tags must include a data-integrapay attribute to allow the imported JavaScript to identify them, as follows:
Card Detail | Element Type | Attribute Value |
|---|---|---|
cardholder name | <input> | CardName |
card number | <input> | CardNumber |
card expiry month | <select> | CardExpiryMonth |
card expiry year | <select> | CardExpiryYear |
security code | <input> | CardCcv *Only for Real-Time Transactions |
After the JavaScript has tokenised the payment card details, it will clear the elements used to accept the card number and security code values. To access the values of the other elements, either specify an id attribute for the tags and read them using your own JavaScript, or specify a name attribute for the tags to include them as parameters when the <form> is submitted, as follows:
In the <select> element for the card expiry month, add an <option> tag for each calendar month that includes a <value> attribute with a value of the month number as two digits left-padded with zero, from 01 for January to 12 for December. The display text for each <option> is your choice, but we recommend using either the two-digit month number, as appears on payment cards, or an abbreviated month name, as follows:
In the <select> element for card expiry year, add an <option> tag for each of the next five or more years, starting with the current year, that includes a value attribute of the year as four digits. The display text for each <option> is your choice, but we recommend using the four-digit year, as follows (at the time of writing, the year was 2018):
Adding the error indicator
In the <form> element, add a <div> tag to contain the error indicator that is used to notify the payer if any problems occur while the JavaScript tokenises the payment card details. The <div> tag must include a data-integrapay attribute with a value of Errors to allow the imported JavaScript to identify this element.
Note that if payers are notified about problems that occurred during the tokenisation process, then the <form> is not submitted automatically by the JavaScript. This allows payers a chance the fix the problem and try again.
Adding the progress indicator
In the <form> element, add a <div> tag to contain the progress indicator that is displayed while the JavaScript tokenises the payment card details. The <div> tag must include a data-integrapay attribute with a value of Processing to allow the imported JavaScript to identify this element.
The process of tokenising the payment card details includes asynchronous communication between the payer's web browser and IntegraPay web services. This can take a few moments to complete, so a progress indicator is displayed automatically to let payers know that your webpage is busy, not broken.
Adding the submit button
In the <form> element, add a <button> tag to allow payers to submit their credit card details for tokenisation. The <button> tag must include a data-integrapay attribute with a value of SubmitButton to allow the imported JavaScript to identify this element.
To allow the JavaScript to tokenise the credit card details before the <form> is submitted, the <button> tag must include a type attribute with a value of button; not a value of submit. If the wrong value is specified, then tokenisation will not occur and your web server will receive confidential information about payment cards, raising your PCI compliance obligations.
The display text for the <button> is your choice, but should be chosen to indicate the purpose for which the tokenised payment card details will be used. For example, if the next action taken by your website is to process a payment using the tokenised details, then we suggest using Process Payment for the display text, as follows:
Making a single live tokenised card transaction
This function submits a single credit card payment to the bank and returns a result in real-time. The payment can be a complete payment that will be processed and the funds settled to the business, or it can be a pre-authorisation that will hold the funds until you Process a pre authorised card transaction or the pre-authorisation expires.
This call requires a token generated from the Tokenize Card endpoint. For more details on how to tokenize the card, click here.
Usually transactions will be processed by the bank and a result returned to you within a couple of seconds, however delays in the bank networks can occur from time to time so you should ideally enable your system to be able to wait up to 90 seconds to get a transaction result.
API |
|---|
POST Make a live tokenized card transaction Minimum property requirements:
Depending on the workflow of your application, the tokenised card payment can still be allocated to a Payer Reference only if a Payer Record has been created previously:
|
Sample |
|---|
Example Request Example Request Example Request with allocation to Payer Record Example Response for successful transaction Example Response for failed/rejected transaction |
Making a live tokenised card transaction + Save Payer Data
Same as above, this function submits a single credit card payment to the bank and returns a result in real-time, however the SavePayer property allows the payers payment data to be saved in the secure Payrix Vault to allow for ongoing/recurring payments.
API |
|---|
POST Make a live tokenized card transaction Minimum property requirements:
|
Sample |
|---|
Example Request Example Response for successful transaction Example Response for failed/rejected transaction |
Add or update a Payers card details via token
This function will give you the ability to attach a card to one of your existing payers without the sensitive card information passing through your servers, which frees you from a significant portion of the PCI Compliance obligations. To use this function simply send through the Token you receive when the payment details form that you have wired-up with our JavaScript library is posted-back to your server.
API |
|---|
POST Add or update a Payers card details via token To add or update a payers card details via token, a payer record must initially be created:
Once a payer record has been created, you can add or update their card details via token. |
Sample |
|---|
Example Request Example Response |
Implement Recurring Payment solutions after Saving Payer Payment Data
Once a payers card payment data has been saved to the Payrix Vault via the payment solutions above, to collect future payments, the Payrix platform offers 3 solutions:
Process a transaction using saved card details / charge stored card
Processes a real-time card transaction on the card account registered to the payers account
Schedule a single payment
A non real-time card transaction allowing you to schedule a payment to be processed on the current or future date
Schedule multiple future payments
A non real-time card transaction allowing you to schedule multiple future payments to be processed on the current and future date
Refer to the links to implement a recurring payment solution after saving payer data:
This concludes the API workflow of implementing the Payrix JavaScript and ongoing payments to your application. Refer to our other methods available for accepting payments.