Using the Credit Card Component

Introduction

Asking for credit card numbers is another very common task in call centers. This includes the number, the expiration date and the security code, and of course it’s a must that the call is not being recorded while the user enters this information. The Credit Card component available with the 3CX Call Flow Designer comes to solve this, automatically handling retries in case of any problem validating the credit card information.

This guide describes how to use the “Credit Card” component to ask for the number, the expiration date and the security code, and perform the validation using a web service. We take this opportunity to also show how to use the “Web Service REST” component for the validation.

💡 Tip: The project for this example application is available via the CFD Demos GitHub page, and is installed along with the 3CX Call Flow Designer in your Windows user documents folder, i.e. “C:\Users\YourUsername\Documents\3CX Call Flow Designer Demos”.

Step 1: Create the Project

First, we need to create a new project. Open the CFD and go to “File” > “New” > “Project”, select the folder where you want to save it, and enter a name for the project, e.g. “CreditCard”.

Step 2: Add the “Credit Card” Component

Now we add the “Credit Card” component:

  1. Drag a “Credit Card” component from the toolbox, and drop it into the design surface of the “Main” callflow. Then select the component added, go to the “Properties” window and rename it to “requestCreditCard”.
  2. To open the configuration dialog for this component, double-click or right-click on it and select the menu option “Configure”.

Credit Card component configuration in 3CX CFD

  1. Here we need to set these options to collect the credit card info:
  • “Max Retry Count for Number, Expiration and Security Code”: the number of times the user can retry entering the credit card number, expiration date and security code after a validation failure.
  • “User Input for Credit Card Number”: section to configure user input collection options for the credit card number.
  • “Request Expiration Date”: enable to ask for the expiration date and set user input collection options.
  • “Request Security Code”: enable to ask for the security code and set user input collection options.
  1. In this demo application, we ask for a credit card number, expiration date and security code. We need to define the prompts to ask for each of these, the prompts to inform that the input is invalid or that no digits were detected.
  2. We also need to set the minimum and maximum number of digits to collect for each user input, even though the components are pre-configured with valid values for every type of credit card.
  3. If you are only collecting a specific credit card, for example Visa, you may need to restrict some values, like the length of the number or the security code.

Step 3: Validate the Credit Card Info via a REST Web Service

The Credit Card component has two branches:

  • “Valid Input”: executed when the credit card number, expiration date and security code are successfully entered. This means that the user entered at least the minimum number of digits expected, but the validation has not been performed yet, so even if we execute the “Valid Input” branch, that does not mean that the information is valid.
  • “Invalid Input”: executed when any of the required values was not entered by the user. In this case we may use a prompt message to explain in more detail what the user needs to enter. For this example, we leave the “Invalid Input” branch empty, so when the user doesn’t enter a valid credit card number, expiration date or security code, the component automatically retries asking for this information, until the Max Retry Count is met.

In the “Valid Input” branch we validate the input, using the “Web Service REST” component, which supports different authentication methods out of the box:

RequestCreditCard example CFD flow

  1. Drag a “Web Service REST” component from the toolbox, and drop it into the “Valid Input” branch. Then select the component added, go to the “Properties” window and rename it to “validateCreditCard”.
  2. To open the configuration dialog for this component, double click or right click on it and select the menu option “Configure”.

Web Service REST component configuration in 3CX CFD

  1. Here we need to configure our “Web Service REST” component:
  • “URI”: an expression that returns the web service endpoint URL including the credit card number, expiration date and security code in the query string, e.g.:

CONCATENATE("https://webservice.example.com/validateCreditCard?number=",requestCreditCard.Number,"&expiration=",requestCreditCard.Expiration,"&security_code=",requestCreditCard.SecurityCode)

  • “Request Type”: the HTTP method used for the validation, in this case “GET”.
  • “Content Type”: content field descriptor. Can be JSON, XML, or any other content type. We leave it blank for this example, as we are not sending any content, i.e. this is a GET request.
  • “Content”: this is an expression to build the actual content. In this demo we leave it blank.
  • Finally, we configure Basic Authentication and we set the username and password from callflow variables.

Step 4: Check Validation Result and Pass to Credit Card Component

The Credit Card component has a “Validated” property. We need to set this to true if the validation succeeds, to stop the Credit Card component asking for the credit card number, expiration date and security code again when the “Valid Input” branch ends. To do this, we can use a “Create a Condition” component:

  1. Drag it from the toolbox and drop it below the “Web Service REST” component we added in the previous step.
  2. Rename it to “checkValidationResult”, configure the component with two (2) branches and name these “validated” and “not_validated”.
  3. To check if the web service returned the number “1” as validation result, set the “Condition” for the “validated” branch to this expression:

EQUAL(validateCreditCard.ResponseContent,"1")

  1. Then, in the “validated” branch set the variable “requestCreditCard.Validated” to true and transfer the call to the Sales team extension, as the credit card is validated.
  2. In the “not_validated” branch we play an invalid input message, so the “Credit Card” component can retry asking for the credit card number, expiration date and security code.

Valid Input example CFD flow

Consider the above example flow for the “Valid Input” branch of the Credit Card component.

Step 5: Build and Deploy to 3CX Phone System

The project is ready to build and upload to our 3CX Phone System server, with these steps:

  1. Select “Build” > “Build All” and the CFD generates the file “CreditCard.zip”.
  1. Go to the “3CX Management Console” > “Advanced” > “Call Flow Apps” > “Add/Update”, and upload the file created by the CFD in the previous step.
  1. The Call Flow app is ready to use. Make a call to it to test this app.

See Also

Last Updated
This document was last updated on 29th August 2021
https://www.3cx.com/docs/cfd-credit-card-validation/