HomeGuideMethod ReferenceAssess YourselfRequest Sandbox Account
Ask For AssistanceLogin

Tokenization via Hosted Card Capture Form

Suggest Edits

PCI Booking users (e-commerce sites) who request card data to be provided from end-customers (for example, a customer making a travel reservation) on the e-commerce's web site should use this service.

PCI Shield offers a card capture form which can be integrated either as a stand-alone page or, more commonly, as an iFrame in the e-commerce web site.
This form captures card data, tokenizes and then sends the token to the e-commerce site for future use; e.g., relays to a payment gateway or relays to a hotel or any other service provider.

Preparing the Card Capture Form

The e-commerce site has significant control over the capture form's look and feel, via a custom stylesheet (.css) file.
As a baseline, you can use our default CSS to design your own.

Please note: the stylesheet will be stored in PCI Booking's database, and will be used in the iFrame with the stylesheet name. Read more on managing stylesheets.

Once the capture form has been submitted, the card owner will redirected to a success or failure page - based on the result of the submission. Please follow our instructions on setting up the success / failure redirection pages.

Tokenization via Card Capture - Flow

  1. (optionally) Prepare in advance the CSS that should be used for this card capture.
  2. Prepare in advance the success / failure redirection pages that the iframe will redirect to once tokenization is completed.
  3. Authenticate PCI Booking via an "access token" or a "session token". Read more about our authentication methods.
  4. Prepare the card entry form URL based on our method documentation - within the parameters of the card entry form URL, you will be able to specify, among other things:
    • The look and feel of the form to match your site's design
    • The language of the form
    • Whether the PCI Booking form should have a submit button or whether our form should be submitted with the submit button of your parent page (this is done by implementing the PostMessage mechanism)
    • Whether 3D Secure authentication should be processed (by implementing the PostMessage mechanism)
  5. Set this URL as the SRC parameter of an iFrame element within your HTML - below is a code example of a basic HTML with the PCI Booking card entry form set as an iframe
<html>
 <body>
 hello world

  <iframe src="https://service.pcibooking.net/api/payments/capturecard?sessionToken=&brand=PCIB&cvv=True&autoDetectCardType=True&showOwnerId=False" width="100%" height="500" />
 </body>
</html>

📘

Card form URL with or without parameters

When setting the card form URL as the SRC of the iFrame element in your HTML, your customers may be able to view the parameters that you had set and potentially change them.
To overcome this, we have created a process where you can submit all necessary parameters for the card entry form in a direct API request, get a session identifier in the response, and then use that session identifier - as the sole parameter, in the card entry form URL.
For more information on this, please review our documentation on requesting a card entry form without parameters.

  1. When the users submit the Card Capture form, PCI Booking will tokenize the card and relay the card token to the e-commerce site.
  2. Optionally, set the CVV Retention Policy for this token.

Once the card has been tokenized, you can then perform any subsequent action on the card - such as charge the card, relay the card or display the card

Example

Below is an example of how the basic Card Capture form will look like when integrated into a web site.

🚧

Example only!

The following is an example only of how the card capture form would like look when used in an iframe. It is not a functioning example. If you attempt to submit this form, you will receive an error.

📘

This form is a very basic example of how the form would look like. You can customize the look and feel of the form to match your own web site.
Please do not submit this form as it is not live.

Updated almost 2 years ago