Guides

General Components Configuration

Suggest Edits

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.

OptionDefinitionPossible Values
components.createThis creates a component ready for it to be mounted.cardForm cardNumber cardholderName cardExpireDate cardCvv payment
components.mountOnce you have created each required component, the next step is to mount them by referencing the <div> where it will be attached. This adds the component to the DOM, making it visible within your checkout.The possible values will include the input-fields that have been created.

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,
     })

Updated about 1 month ago