In order to be able to integrate new payment methods on your Checkout you have to first integrate the new Hosted Tokenization Page.
The new form was developed to comply with modern accesibility and UI requirement also simplyfying the integration.
Only tokenization in fronted is changing.
No change for the creditcard processing is needed. You receive PPAN and other data that is needed for the existing Authorization/Preauthorization and other requests.
Integration
This documentation is simplified and should be enough for the simple integration. For extended documentation please use the extended documentation.
Session Initiation Request
In order to load the JS SDK and Hosted Tokenization Page you have first to fetch the JWT from the Server API of Payone. This is a new API Request against our Server API that will return a JWT that later has to be included while loading the SDK/HTP as a token value. Currently the validity of the Token is 10 minutes and it can be used multiple times during this time to tokenize card data.
Step 1: JWT Token Generation
Create a Json Web Token
Creating a JWT needed for later authentication within JS form when is being submitted for card processing
POST Request to retrieve a JWT token
POST https://api.pay1.de/post-gateway/
Accept: application/json
Content-Type: application/x-www-form-urlencoded
request=getJWT
&mid=123456
&portalid=YOURPORTALID
&key=%HASH_of_THE_PORTAL__KEY%
formBgColor: background color of payment form fieldBgColor: background color of input field fieldBorder: border of the input field fieldOutline: outline of the input field fieldLabelColor: text color of the input field label. fieldPlaceholderColor: text color of the input field placeholder fieldTextColor: text color of the input field text fieldErrorCodeColor: text color of the error code.
Custom languages support
In order to modify the current text for a certain language you can provide the Language value in the configuration.Partial modification is supported so you are able to modify only some part of the default texting by providing the configuration only for the needed fields.In order to use the custom language you need to provide a complete configuration for the language in the configuration. If this is not provided - the missing field will use a fallback language - English.
Sample Configuration - English and Czech
This configuration sample replaces standard text for english and extends the app to support czech language as an example.
To display czech language you will need to provide the czech configuration from the sample below and set locale: "cs_CZ".
---end
Objecttitle
customTextConfig: {
en: {
labels: {
cardNumber: "Card number",
cardholderName: "Cardholder Name",
expiryDate: "Expiry Date",
securityCode: "Security Code",
},
placeholders: {
cardNumber: "cardNumber ",
cardholderName: "CarholderName ",
expiryDate: "expiryDate Custom ",
securityCode: "securityCode ",
},
arialabels: {
cardNumber: "Enter your card number",
cardholderName: "Enter the name on the card",
expiryDate: "Enter the expiration month and year of your card",
securityCode: "Enter the card verification code",
},
errors: {
cardNumber: {
isRequired: "Card number is required",
isInvalid: "Invalid card numbe",
isTooShort: "Card number is too short",
notSupported: "Card number not supported",
},
cardholderName: {
isRequired: "Cardholder name is required ",
isInvalid: "Invalid Cardholder name"
},
expiryDate: {
isRequired: "Expiry date is required",
isInvalid: "Invalid Expiry date"
},
securityCode: {
isRequired: "security code is required",
amexCardSecurityCodeError: "Invalid security code",
generalSecurityCodeError: "Invalid security code"
},
},
},
cs: {
labels: {
cardNumber: "Číslo karty",
cardholderName: "Jméno držitele karty",
expiryDate: "Platnost",
securityCode: "Bezpečnostní kód",
},
placeholders: {
cardNumber: "1234 1234 123 1234",
cardholderName: "Jan Pavel",
expiryDate: "MM/RR",
securityCode: "123",
},
arialabels: {
cardNumber: "Zadejte číslo karty",
cardholderName: "Zadejte jméno držitele karty",
expiryDate: "Zadejte měsíc a rok expirace karty",
securityCode: "Zadejte bezpečnostní kód karty",
},
errors: {
cardNumber: {
isRequired: "Zadejte číslo karty",
isInvalid: "Neplatné číslo karty",
isTooShort: "Číslo karty je příliš krátké",
notSupported: "Tento typ karty není podporován",
},
cardholderName: {
isRequired: "Zadejte jméno držitele karty",
isInvalid: "Neplatné jméno držitele karty"
},
expiryDate: {
isRequired: "Zadejte měsíc a rok expirace karty",
isInvalid: "Neplatné datum expirace"
},
securityCode: {
isRequired: "Zadejte bezpečnostní kód karty",
amexCardSecurityCodeError: "Neplatný bezpečnostní kód",
generalSecurityCodeError: "Neplatný bezpečnostní kód"
},
},
},
}
---end
Step 3: Run html on a webserver to load the javaScript file from payone server
If you want to test this script locally, you can use docker to test it:
docker run -p 80:80 -v <your directory>:/usr/local/apache2/htdocs/ httpd:latest
The page will load the JavaScript and use the configured credentials to perform a tokenization request.