Credit Card Integration

Follow these steps, in order, to take a payment using consumer's credit card information:

Add ConnexPay's SDK script and CSS link

<head>
    <link rel="stylesheet" href="https://cpaysdkservice.azurewebsites.net/sdks/sdk.v1/css/connexpay.min.css">
  <script src="https://cpaysdkservice.azurewebsites.net/sdks/sdk.v1/js/connexpay.min.js"></script>
</head>

<head>
    <link rel="stylesheet" href="https://cpaysandboxsdkservice.azurewebsites.net/sdks/sdk.v1/css/connexpay.min.css">
  <script src="https://cpaysandboxsdkservice.azurewebsites.net/sdks/sdk.v1/js/connexpay.min.js"></script>
</head>

📘

Note

Notice the differences in the script and css sources between production and sandbox environments

Add required elements and input fields

<body>
  <!-- This element is the container for ConnexPay's credit card form. It is required -->
  <div id="connexpay-element"></div>
  <!-- This element is for consumer's name as it appears on credit card. It is required -->
  <input class="custom-input-field" placeholder="Card Holder Name" id="custom-cardholder">
  <!-- This element is for consumer's email. It is required -->
  <input class="custom-input-field" placeholder="Enter E-mail" id="custom-receipt-email">
  <!-- This button creates the sale provided the information given is valid. It is required -->
  <input class="custom-input-button" id="custom-submit-button" type="button" value="Pay with Credit Card">
</body>

Finally integrate with the sdk

<body>
  <script>
    /**
     Instantiate the ConnexPay's SDK by calling its create function. It takes in elementID
     which represents the container's ID and some options. 
    */
    window.ConnexPay.create("#connexpay-element", {
      /**
        * callback - SDK calls this function once the payment call finishes execution.
        * @param type - This represents whether the payment has succeeded or not. 
        *   The value can be one of error, success, warning, sys_error, sys_warning, validation_error
        * @param data - Object representing failure or success.
        * @param message -  message string
      */
      callback: function (type, data, message) {
        // TODO: other operations that the client wants to do upon failure or success of the payment
      },
      modal: true, // This shows whether modals should be presented for payment success confirmation, payment failure or validation error
      payload: {
        "PublicKey": "", // Unique key provided by ConnexPay for each client
        /*
            TransactionType should be either sale or verify. 
            sale - an actual sale using the card inforation.
            verify - verifies whether the card is valid for later sale. It returns a card id
          that can be used to do a sale later
        */
        "TransactionType": "",
        "Description": "",
        "TenderTypeOptions": [
          "Credit",
        ],
        // Expiration represents a date of expiration between verify and the actual sale
        "Expiration": "YYYY-MM-DD",
        "sale": {
          // Device Guid. It is required
          "DeviceGuid": "",
          // Required
          "Amount": 100,
          // Required. List of LabelIds the transaction applies to
          "LabelIds": [],
          "RiskProcessingOnly": false,
          "OrderNumber": "",
          "ConnexPayTransaction": {
            // This is the number of outbound payments that will be made to suppliers.
            "ExpectedPayments": 1
          },
          "RiskData": {
            "Name": "",
            "Email": "",
            "ProductType": "",
            "ProductDesc": "",
            "ProductItem": "",
            "ProductQuantity": 1,
            "ProductPrice": 100,
            "OrderNumber": "",
            "SellerID": ""
          },
          // Customer information. Optional
          "Customer": {
            "FirstName": "",
            "LastName": "",
            "BusinessName": "",
            // Ten digit phone
            "Phone": "",
            "City": "",
            // Two letters state. For example NY
            "State": "",
            "Country": "",
            "Email": "",
            "Address1": "",
            "Address2": "",
            "Zip": "",
            "DateOfBirth": "YYY-MM-DD",
            "DriverLicenseNumber": "",
            // Two letters state. For example, NY
            "DriverLicenseState": "",
            "SSN4": "1210"
          }
        }
      },
      elements: {
        // fields create a map of form elements to their id
        fields: {
          submit: "#custom-submit-button",
          name: "#custom-cardholder",
          email: "#custom-receipt-email"
        },
        css: {
          // CSS applied to the container that holds ConnexPay's form elements
          container: {
            display: 'flex',
            gap: '16px',
            'min-height': '60px',
            border: '1px solid red',
            'margin-bottom': '5px',
          },
          // CSS applied to each input field. This is for both the label and the input fields
          input: {
            'border': 'none',
            'outline': 'none',
            'padding-top': '10px',
            'font-size': '15px',
            'font-weight': '600',
          },
          // CSS applied to the input field only
          inputInside: {
            'background-color': 'red',
            
          },
          // CSS applied to the label field only
          label: {
            left: '20px'
          },
          // CSS applied to the card logo displayed on the right side of the credit card input field
          logo: {
            
          }
        }
      }
    });
  </script>
</body>

Sample

Updated 10 months ago