General Components Configuration

Components configuration

Component object - Acquired.js

A component object points to an embeddable element within your checkout, such as the card form or card expiration date.

Set your confirmParameters

The confirmParams constant allows you to send additional information for the payment authorisation request after the session has been initiated. You can include details such as customer, shipping, and billing data to support AVS verification.

📘

Note

If you want to change the transaction or 3DS parameters generated in the /payment-sessions request, you are required to submit a PUT request to /payment-sessions/{session_id}.

For a list of the parameters that can be passed, please refer to our /payments endpoint.

For the Form and Fields, to save a card for future use, ensure that you have passed the create_card parameter and set to true.

For the payment form to mandate saving card details, pass is_recurring:true in the session endpoint.

Example:

const confirmParams = {
  payment: {
    create_card: true
  },
  customer: {
    reference: "cfe19f01-6fe5-4c82-be05-0f66054efde1",
    billing: {
      address: {
        line_1: "Flat 1",
        line_2: "152 Aldgate Drive",
        city: "London",
        postcode: "E1 7RT",
        country_code: "GB"
      },
      email: "[email protected]",
      phone: {
        country_code: "44",
        number: "2039826580"
    },
    shipping: {
      address_match: true
    },
    webhook_url: 'https://www.yourdomain.com/webhook'
    }
}

Handling form submit

You are required to attach an event listener to the form element, which will listen for a “submit” event. This occurs when the user clicks on the submit button. The response will then be returned when the payment request has been processed, which refers to the confirmParams function.

form.addEventListener('submit', async (event) => {
     event.preventDefault();
     const response = await acquired.confirmPayment({
         components,
         confirmParams: confirmParams,
     });
});

Preventing duplicate payment submissions

The submit button is implemented by your application and sits outside of Acquired’s secure iFrames. As a result, Acquired is not able to control or disable this element. To ensure a smooth user experience and to avoid multiple payment attempts, you must prevent the customer from clicking the submit button more than once while the payment is being processed.

We recommend disabling the button as soon as the payment flow begins, and re-enabling it only if the payment fails or additional customer action is required.

Example implementation

// acquired and components are created in the steps above:
// const acquired = new Acquired("pk_...");
// const components = acquired.components({ session, environment });

const form = document.getElementById("payment-form");
const payButton = document.getElementById("pay-button");

let isSubmitting = false;

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  // Prevent duplicate submissions
  if (isSubmitting) {
    return;
  }

  isSubmitting = true;
  payButton.disabled = true;

  try {
    const response = await acquired.confirmPayment({
      components,
      confirmParams: {
        // Optional: billing details, redirect URLs, metadata, etc.
      }
    });

    // Re-enable the button only if the payment did not complete successfully
    if (!response || response.status !== "success") {
      isSubmitting = false;
      payButton.disabled = false;
    }

    // On success, you may redirect the customer or wait for webhook confirmation
  } catch (error) {
    console.error(error);

    isSubmitting = false;
    payButton.disabled = false;
  }
});

Best practice

• Disable the submit button immediately after the customer initiates the payment.
• Re-enable the button only if the payment fails or requires additional action.
• Use a stable order_id or internal identifier for the payment so that multiple attempts share the same reference; Acquired will only allow a single successful outcome for that identifier.
• Ensure the submit handler calls confirmPayment only once per payment attempt.
• Rely on your server-side webhook notification to confirm the final payment outcome.