One-click

The 1-Click is the technique allowing customers to make purchases with payment information already registered to complete their purchase faster.

The purpose of this documentation is to explain the implementation of the one-click feature with HiPay SDKs by giving the possibility to force the CVC of a card or add a new one in your payment page.

In this demonstration, we use a front-end written in HTML/CSS with Javascript (jQuery) and backend server written in PHP. All examples written in this document are for reference only, you should not implement them in production.

User Experience

The screenshot is a payment page of an order of two items for a total amount of €6.75. The user has to choose one of their first two saved cards or to add a new card. The first two cards were previously tokenized during a payment of the same customer.

To use these credit cards, it is mandatory to provide the CVC.

Card displaying

Each card is composed of an input radio button that includes token in its attributes. The associated credit card logo is displayed with the name of the cardholder and the masked PAN with its expiry date

The first registered card 4111**111 can only be used if the user enters the CVC associated with their card, the payment button is disabled if the CVC is not filled.

This HTML code below corresponds to the above screenshot. A hidden div markup named status-cvc-container contains a check image with its span markup to indicated the cvc is updated.

The div markup named check-cvc-container is displayed by default when the users click one the card. It contains an input to entered the CVC and an OK button.

The PAY button is disabled until the user provides the CVC of the card. If the user sends its CVC by clicking the OK button, the payment information token and payment_product are sent to your server with AJAX call when the PAY button is clicked. After that, check-cvc-container is hidden and status-cvc-container is displayed.

New card

The customer has the option to add a new card if needed. This forms in the exampled is generated with the Hostedfields feature presents in the HiPay JS SDK.

Front-End

Card tokenization

When we have tokenized cards, the multi_use parameter was sent with the true value, so this card could be reused for a future payment. Card tokens are written directly into HTML tags of the page.

To use HiPay Javascript SDK, you have to create an HiPay object named hipayInstance in this example. Then you have to create card instance joined by the selector parameter to the new-card-form div with templateset to auto.

Then, we add a click event on the OK button. We retrieve card token and its cvc entered by the user.

We use the updateToken function provided by HiPay SDK to update the new cvc with the associated token. At the callback success, we set true value in an item in session storage. With the value stored in Session Storage, the user does not have to update his token even he refresh the tab.

The Token can be not updated in the HTML page because it remains the same even after the update. After that, Do not forget to display the status-cvc-container div markup and hide the check-cvc-container div markup.

You can add a keyup event on the CVC input to force users entered 3 (VISA / Mastercard) or 4 (AMEX) digits for the validating. For that, we add a Regex and a maximum length retrieved from its maxlength attribute of the input to enabled or disabled the OK button.

Back-End

This provided code is used in the back-end server. In this example code, we create a HiPay transaction with all required data. We send the request order with the PHP HiPay SDK, and we create a JSON response sent to the front-end.

Transaction Status

The server sent the response the forward URL of the transaction in the AJAX call, with the transaction number and the order ID. The windows.location function will redirect the customer to the final page. If we have a success page, the url will be https://FRONDEND_URL/?type=accept and https://FRONDEND_URL/?type=accept if failure.