How to Utilize Checkout

Checkout is a simple API that allows you to capture payment information directly from the consumer without the need to handle sensitive account information. We provide pre-built UIs which can be displayed as a pop over or embedded directly inside your page, as well as a custom implementation which allows you to embed the form elements inside your page. The checkout process is divided into two key steps: the initial step involves collecting the sensitive account information and generating a temporary token directly from the client-side code, while the subsequent step utilizes the temporary token to either process a live payment or create a permanent token from your server-side code. Checkout can be used to take payments for Credit Cards, Pinless Debit, ACH, and RCC.

Setting Up The User Interface

Pre-built UI

To begin, you will also need to add a script tag to include the Checkout.js file into your page. Then you need to create a settings object which will define what options will be shown, such as which payment types are accepted, your logo, colors, descriptions, and other items. Next, you will make a JavaScript call to load the checkout UI with your settings object and your client-side API key. Please note that it is safe that your API Key can be seen as it can only be used to create temporary tokens and cannot be used to create a payment or validate card information. Once the prebuilt UI captures the payment information and creates the temporary token, it will make a callback to your page with a payload that includes the token and metadata on the payment. You would then pass this data back to your server where you can then complete the transaction.

Custom UI

When creating the user interface within your own web page, you need to add the input fields, according to whichever payment types you wish to accept. Since you aren't using the pre-built UI, you will need to implement frontend input validation. When you are ready to create the token, you will package the information from your input fields into a JSON object and make a client-side call to the GenerateToken endpoint. Take care to not submit your form to your server as this would increase your PCI scope. When the API resposne is received, check it for any errors and then you can proceed to clear the form of the sensitive data and send the JSON response to your server to complete the transaction.


How to Consume a Temporary Token

After you have received your temporary token from either the pre-built UI or your own custom integration, you will need to pass it back to your server-side code to complete the transaction. It is important that this is done from server-side code as the call to SubmitTokenPayment requires your full API credentials that you cannot expose. The call to SubmitTokenPayment can be called to create a live transaction, by supplying a transaction amount, the other required fields such as name and address, and other optional fields. If you do not desire to create a live transaction, but rather convert the temporary token to a permanent one, you will set the amount to Zero and complete the other required and optional fields. Please note that if you only create a permanent token, CVV and Address Validation are not done, and only the transaction information is saved. In either scenario you will receive back a confirmation ID. A confirmation ID is the unique reference to this transaction as well as a permanent token that can be used later on with Payments API 2.0.

Additional API Endpoints to Use

At this point you should have access to the ConfirmationID and other details pertaining to your transactions. From here, you can take the ConfirmationID and make a web call to...