Hosted Payment Elements

Hosted Payment Elements (HPE) provides an iFrame checkout experience for merchants who use Vesta’s Direct API integration but want to stay out of PCI scope. HPE adds card number, expiration date, and CVV fields to your checkout page and provides the option to create payment tokens to support recurring payments.

The HPE documentation includes all of the information you will need to configure HPE and integrate it as part of your website:

  • Features - Definitions of the features included with HPE.

  • Implementation Overview - A high-level description of how HPE fits in the rest of your checkout process.
  • Prerequisites - A list of requirements that you must have in place before implementing HPE.
  • Configuration - A step-by-step guide detailing how to use the vPortal to define the appearance and set up the features of HPE.
  • Integration - A detailed guide for adding HPE to your web application.

Features

Vesta’s HPE includes the following features:

  • Customizable Payment Fields - Ensure that the appearance of HPE matches your branding by setting the logo and colors that the card number, expiration date, and CVV fields will use.
  • One-time and Permanent Card Tokenization - Capture card data for one-time payments or use it to create a permanent token for recurring payments.
  • Vesta’s Fraud Protection and Risk Management - Enjoy all of the fraud protection provided by your Payment Guarantee or Payment Protect Direct API integration without having to maintain PCI compliance.
  • Flexible Integration - Implement all of the features and workflows supported by our Direct API integrations without having to collect protected payment data.

Implementation Overview

The steps below describe the checkout process using HPE:

  1. During checkout, collect all of the information required for the request to the ChargePaymentRequest endpoint, except for the payment card details.
  2. To collect payment card details, display the HPE iFrame using the HTML generated during Portal Setup. When your customer enters data into the fields, Vesta validates the values and returns the results to an event handler as JSON. The results will include a token for the card number, and an encrypted value that combines the expiration date and CVV, if you submitted them.
  3. Send the token and encrypted data in the body of a request to the appropriate Vesta API endpoint, depending on your subscription:
    • Payment Guarantee - Send a request to the ChargePaymentRequest to obtain a fraud assessment. Vesta processes the payment as normal, based on your risk settings, and returns the results.
    • Payment Protect - Send a request to the ChargePaymentFraudRequest endpoint to obtain a fraud analysis. Submit the transaction to your payment processor as normal. Once the transaction is complete, update Vesta of the results using the Disposition endpoint.

See the Configuration and Integration pages for details about how to incorporate the HPE into your application.

Prerequisites

Contact your Integration Specialist to set up a walkthrough of Hosted Payment Elements and to enable it for your account.

In order to use HPE in your application, you must ensure that the following items are in place before proceeding with the integration:

  • A Payment Guarantee or Payment Protect Subscription - HPE requires an existing subscription to one of Vesta’s fraud detection or payment platforms.
  • Direct API Integration - Before integrating HPE into your application, set up the Direct API integration as required by your Vesta subscription: Payment Guarantee Integration or Payment Protect Integration.