Hosted Tokenization Page

How it works

Before you process live transactions, use our test environment. Get to know our solution without costs or any commitments involved! Once you want to go live, check out here how to get a production account or contact us!

Flows

Find a full transaction flow involving every party and (optional) steps in this overview:

1. Your customers go to your check-out page and finalise the purchase.
2. You send a CreateHostedTokenization request to our platform. Our platform returns a hostedTokenizationURL.
3. You add the <iframe> hosting the payment mask to your check-out page.
4. Your customers enter their card details in the <iframe>.
   4'(optional). You use our validation function to check whether the cardholder has filled in the form correctly.
5. Your customers submit the card data to our platform.
6. Our platform tokenises the card data and returns a hostedTokenizationId.
7. You send a CreatePayment request to our to our platform using our Server-to-server integration method, including the mandatory 3-D Secure properties.
   7'(optional).We perform a fraud prevention check.
8. Our platform sends a response containing a merchantAction object, instructing you how to proceed. These scenarios are possible:
   a) 3-D Secure frictionless flow (merchantAction.actionType=null). The flow continues at step 14).
   b) 3-D Secure challenge flow (merchantAction.actionType="REDIRECT"). The flow continues at step 9).
   c) No 3-D Secure authentication (merchantAction.actionType=null). The flow continues at step 14).
9. You redirect the customer to her/his issuing bank for 3-D Secure authentication. The customer identifies herself/himself.
10. Our platform receives the 3-D Secure authentication result from the issuer. Based on the result, two scenarios are possible:
    a) If the identification was unsuccessful, we redirect your customers to your returnURL, ending the flow. You request/show the transaction result as described in step 13.
    b) If the identification was successful, the flow continues at step 11.
11. We process the transaction and receive the result from the acquirer.
12. We redirect your customer to your returnURL.
13. You request the transaction result from our platform and show it on your returnURL/in your webshop.
14. If the transaction was successful, you can deliver the goods / services.
    14'(optional). Delete the token if you do not plan it to use it for recurring payments or if your customer did not agree to store the credentials.

Advanced customisation

We have designed our Hosted Tokenization Page in a way to allow you to customise it as freely as possible. Take a look at these features:

Create iframe template

The centrepiece of this solution is an iframe containing the payment form. Adapting the iframe to your corporate identity allows you to merge it seamlessly into your webshop. We have designed it in a way that allows you to

• Adapt its various HTML elements at your liking.
• Use your own .css /image files to further modify the payment form.

Choose language version

Our Hosted Tokenization Page is available in various languages. Populate locale to display it in your customers’ preferred language. The value is a combination of language and country:

{ 
    "locale":"en_EN", 
    
    /* other properties omitted */ 
}

We support the following languages:

Customise template

We provide two distinct approaches for implementing a customised template:

Method 1: Create a fully customised template 

Create a fully customised template from scratch using our powerful Template Builder. This approach offers a high degree of customisation, allowing you to make intricate changes to the payment form's appearance and functionality.

Method 2: Adapt template from GitHub repository

You can also download and customise the necessary files directly from our GitHub repository, providing even more flexibility. It is the ideal solution to let your customers choose between local or global brands (i.e. Visa, MasterCard) if they are using a co-badged credit card.

Once you have created a template that matches your webshop's look and feel, contact us to upload the template to your account.

Adapt visual style

Apply CSS style to the iframe dimensions to merge it even more seamlessly into your webshop. Add this bit to your .css file accordingly:

iframe[name=htpIframe0] {
    border: none;
    width: 800px;
}

Manage cardholder name

Our API allows to either show or hide the cardholder name field in the iframe.
Pass the boolean hideCardholderName: true or the boolean hideCardholderName: false accordingly in the Tokenizer constructor:

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { hideCardholderName: false });

Send additional tokenizer arguments

The tokenizer call as described in step 3 takes additional arguments on top of hideCardholderName. Add any of them in your request to adapt the payment flow to your needs:

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', 
{ paymentProductUpdatedCallback: mypaymentProductUpdatedCallback });
function mypaymentProductUpdatedCallback(result) 
{ /* Display/remove the detected card brand from your checkout page */ }

Use additional possibilities

Our Hosted Tokenization Page solution offers many more possibilities. Learn here all about its available features.

Use existing token

Our platform allows you to store your customers' credit card data permanently for recurring payments or for 1-Click-Payments, pre-filling in the payment form. It will make your customers’ payment experience even smoother and improve your conversion rate!

As the token is already existing at the time of the transaction request, the payment flow is different:

• Step 1: Instruct our platform you want to use an existing token. To do so, modify the request createHostedTokenizationRequest by adding the property tokens:
  

• A successful response looks like this:

  
  Status: 200 OK
  {
      "hostedTokenizationId": "2f4d08d6ddfc411e944e81c54d824a99",
      "invalidTokens": [ "86a44668-5d0f-4e3f-a597-2aa0a4d03fe5" ],
      "hostedTokenizationUrl": "https://payment.preprod.payone.com//hostedtokenization/tokenization/form/2f4d08d6ddfc411e944e81c54d824a99",
      "partialRedirectUrl": "preprod.payone.com//hostedtokenization/tokenization/form/2f4d08d6ddfc411e944e81c54d824a99"
  }
  

• Step 2: Pre-fill the displayed form with the stored credit card data. Our platform offers you two ways for this:
  1. Pre-fill the form right away as you display it. Achieve this by adding the token as the fourth argument to the tokenizer constructor:
  
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { }, '00164fec-32b2-462e-b48b-84a27930b10c');

  
  2. Leave the form empty at first as you display it. Let your customers choose in your webshop environment to pay with their stored card. If they choose to, use the following function to populate the form:
  
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { });
  ...
  // Later, for instance when a user input triggers a token change
  function tokenChanged () {
  tokenizer.useToken('00164fec-32b2-462e-b48b-84a27930b10c'); //Changes the form to update the selected token, showing only the CVC field if required
  // or
  tokenizer.useToken(); // Resets the form to create a new token
  }

  
  You can also allow your customers to update the token in the payment form. By initialising the boolean hideTokenFields as follows, your customers can do either.
  
  a) {hideTokenFields:true}: Hide known fields (card number/expiry date).
  b) {hideTokenFields:false}: Mandatory fields are visible to be filled in / known fields can be changed (only cardholder name/expiry date).
  
  The request looks like this:
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', {hideTokenFields:true});

Get validation status

Your parent page can get the validation status of the payment form anytime. Pass a validation callback function that is called whenever the validity status of the payment form changes. Make sure this function contains a parameter that receives an object with the boolean property valid. This boolean indicates if the form is correctly filled in.

Use this information to enable/disable the submit button on the parent page if the payment form is correctly/incorrectly filled in. Add this function to your script in step 3:

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { validationCallback: myValidationCallback });
function myValidationCallback(result) { document.getElementById('btn-submit').disabled = !result.valid }

Remove form

You can remove the payment form from the parent page. Calling this function removes the iframe and its event listeners:

tokenizer.destroy();

Use tokenId instead of hostedTokenizationId

Our platform allows you to process transactions with both the hostedTokenizationId and the tokenId. The flow for the former is described in this chapter. Using TokenIDs requires you to modify the flow as follows:

1. A payment request is initiated.
2. Get a valid tokenization URL by a Create Hosted Tokenization call.
3. Add a code snippet to your checkout page, allowing you to display the tokenization form with the valid tokenization URL as an iframe on your check-out page.
4. Your customer enters her/his credit card data on in the iframe.
5. Get the token for the actual payment.
   Recover the result of the tokenization by performing a GetHostedTokenization call from your backend
   Use the following code sample for the request:
   
   

1. Create the actual payment with the token. Send a CreatePayment request to our server. Use the following code sample for the request:

1. You redirect your customers to their issuing bank for a 3-D Secure check. The customers identifies themselves
2. Our system receives the result from the issuer
3. We submit the actual financial transaction to the acquirer to process it
4. We redirect your customer to your ReturnUrl
5. You request the transaction result from our platform via GetPaymentDetails or receive the result via webhooks
6. If the transaction was successful, you can deliver the goods / services
   12' (optional): Delete the token

Pre-select available card schemes

You can exclude or preselect specific card schemes from the iframe using the properties from object paymentProductFilters in your CreateHostedTokenization request:

• exclude.products: Array of paymentProductIds to be filtered out
• restrictTo.products: Array of paymentProductIds that should be available

Find the value for the individual paymentProductIds in column "Payment product id" in this overview.

Manage Card Verification Value

Due to PCI DSS regulations, we are only allowed to store a card’s verification value (CVV/CVC) for a maximum of two hours.

For single payments via the Hosted Tokenization Page, this time span is adequate to initialise the payment. However, when processing recurring payments using permanently stored tokens, you will face the following scenario: for any subsequent payment, our platform prefills the <iframe> fields - except for the CVC code due to this regulation.

To further smooth out your customers' payment experience, our platform allows you to make the CVC check optional. This applies to both the

• Initial payment when creating the token.
• Subsequent payment when using the token.

You can achieve this by implementing the following properties in your checkout page / CreateHostedTokenization request respectively:

When sending "false" for either cvvMandatoryForNewToken/cvvMandatoryForExistingToken property, the validation check will trigger a successful form validation event also when CVC is not added to the iframe. This allows you to continue with the payment flow by sending the actual payment request.

For CreatePayment requests sent without the hostedTokenizationId, our platform takes into account whether the CVC is mandatory for the payment method. Contact us to configure the respective payment method(s) for you in your account. To overwrite that setting per session, we strongly recommend sending the hostedTokenizationId instead of the token in your CreatePayment request.