Skip to main content

drop-in frames integration

make getting paid faster and easier than ever! paymennt APIs provide an easy way to let your customers pay for their orders easily and securely.

frames is an iframe solution that handles payment information. Your customer inputs their card details directly into our iframes, then we send you a token representing of the card details, so you can request a payment.

Integration flow​

  1. You embed the Frames payment form in your website.

  2. When the customer checkouts, they can enter payment details directly on the checkout page.

  3. We process the customer's sensitive information and return a token representing those details. This process is called tokenization.

  4. Your site backend system gathers the order details and the received payment token in a request to make the Create token payment API call to paymennt and obtains the payment response with status and payment ID. Depending on the status-

    • CAPTURED: the payment has been successfully processed (without 3D-Secure redirect). You should update your order status on your backend system.

    • REDIRECT: the payment needs 3D-Secure to be processed, for this the customer should be redirected to the redirectUrl present in the response of Create token payment API call.

    • any other status: they imply that the payment could not be processed. You may ask the customer to checkout again.

  5. For CAPTURED status, you should update order status on your backend system and lead the customer to desired confirmation page.

  6. For REDIRECT status, once the customer has been redirected back to your website, make the Get payment API call using the payment ID received in step 4, to retrieve the status. If status is CAPTURED the payment has succeeded, you should confirm order status on your backend system, for other statuses the payment has failed and you may follow checkout flow again.

  7. For any other status, the customer is finally redirected back to your website using the parameter returnUrl specified in the Create token payment API call.

    Website integration flow

That's it! You're ready to start testing.

Integration details​

  1. Import PaymenntJS JavaScript file into the payment page
<script src="https://pay.paymennt.com/static/js/paymennt-frames.js"></script>
  1. In your page JavaScript initialize PaymenntJS with your public key obtained from paymennt,

Sample code :

PaymenntJS.init({
  publicKey: "{PAYMENNT_PUBLIC_KEY}",
  selector: "#paymennt-card-frame"
  mode: PaymenntJS.modes.LIVE,
  onTokenized: function (data) {
    // send data.token to server
  },
  onTokenizationFailed: function (data) {
    // show data.error message
  },
  onValidationUpdate: function (data) {
    if (data.valid) {
      // enable pay button;
    } else {
      // disable pay button;
    }
  },
});

3- In your page, add an empty <div> element and pass its selector to PaymenntJS.init() method Example:

<div id="paymennt-card-frame" class="card-frame"></div>

Full example​

app.js
var payButton = document.getElementById("pay-button");
var errorMessage = document.querySelector(".error-message");
var infoMessage = document.querySelector(".info-message");

payButton.disabled = true;

PaymenntJS.init({
  publicKey: "pk_test_a941633441f48b73b9b9e1822227829a",
  mode: PaymenntJS.modes.TEST,
  onTokenized: function (data) {
    infoMessage.innerText = data.token;
  },
  onTokenizationFailed: function (data) {
    errorMessage.innerText = data.error;
  },

  onValidationUpdate: function (data) {
    payButton.disabled = !data.valid;
    if (!data.valid) {
      var message = null;
      for (var i = 0; i < data.validationErrors.length; ++i) {
        var fieldValidation = data.validationErrors[i];
        if (!message || fieldValidation.field === data.lastActiveField) {
          message = fieldValidation.message;
        }
      }
      if (!message) {
        message = data.error ? data.error : "Invalid card details";
      }
      errorMessage.innerText = message;
    } else {
      errorMessage.innerText = "";
    }
  },
});

payButton.addEventListener("click", function (event) {
  event.preventDefault();
  PaymenntJS.submitPayment();
});

Test the Integration​

  1. Go to your website, and add products to your cart.
  2. Go to your cart then proceed to the checkout, Enter the required customer and billing details ... .
  3. Select the paymennt.com payment method.
  4. Enter the following card details:
    • Number: 4012 8888 8888 1881 (to demonstrate payment without 3D-Secure)
    • Number: 4242 4242 4242 4242 (to demonstrate payment requiring 3D-Secure redirect)
    • Expiry date: 12/25
    • CVV: 100
    • Name: TEST USER
  5. Check the status of the payment on your backend administration panel.