JS

To customize your payments experience

This section covers different methods and their params of the Hyperswitch JS SDK

Hyperswitch's JS SDK come with many methods which you can use to customize your payments experience. You can use the props to change the appearance, reorder payment methods and much more to suit your business needs.

Hyper()

This constructor gives you access to methods in Hyper API, which you can call. The API details are listed down below.

let hyper = Hyper();

1. hyper.confirmPayment(options)

Use hyper.confirmPayment to confirm a PaymentIntent using data collected by the Payment Element. When called, hyper.confirmPayment will attempt to complete any required actions, such as authenticating your user by displaying a 3DS dialog or redirecting them to a bank authorization page. Your user will be redirected to the return_url you pass once the confirmation is complete.

ConfirmParams object

2. hyper.elements(options)

This method creates an Elements instance, which manages a group of elements.

3.hyper.confirmCardPayment(clientSecret,data?,options?)

Use hyper.confirmCardPayment when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide and carry out 3DS or other next actions if they are required.

clientSecret is a required string.

payment_method example

  payment_method: {
    card: "card",
    billing_details: {
      name: "Jenny Rosen",
    },
  },

3. hyper.retrievePaymentIntent(clientSecret)

Retrieve a PaymentIntent using its client secret.

4. hyper.paymentRequest(options)

Use hyper.paymentRequest to create a PaymentRequest object. Creating a PaymentRequest requires that you configure it with an options object.

clientSecret is a required string.

elements()

After calling the hyper.elements with your options, you will get access to the Elements API. This will have methods which are not specific to a particular payment element (UnifiedCheckout, HyperWidgets, etc. ) but are needed for the overall operation of them.

let elements = hyper.elements(options);

1. elements.getElement(type)

This method retrieves a previously created Payment Element. Here the type is payment for Unified Checkout.

elements.getElement('payment') returns one of the following:

  • An instance of a Unified Checkout.

  • null, when no Unified Checkout has been created.

2. elements.create(type, options?)

This method creates an instance of an individual Element. It takes the type of Element to create as well as an options object.

The type can be ‘payment’ for UnifiedCheckout.

Options object

Layout object

defaultValues object

fields object

terms object

wallets object

3. elements.update(options)

Updates the options the Element was initialized with. Updates are merged into the existing configuration.

If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use element.update with the appropriate information.

The styles of an Element can be dynamically changed using element.update. This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices

paymentElement()

After calling the elements.create with your type and options, you will get access to the PaymentElements API. This will provide you the exact Payment Element you want (UnifiedCheckout, CardElement, etc. ) and functions attached to it by which you can perform various operations

let paymentElement = elements.create("payment",options);

1. paymentElement.mount(domElement)

This method attaches your Payment Element to the DOM. This only accepts a CSS seletor (eg, #unified-checkout) . You need to have created a DOM element in your HTML file where you think you can mount the Payment Element.

2. paymentElement.blur()

Blurs the Payment Element.

3. paymentElement.clear()

Clears the values of the Payment Element.

4. paymentElement.destroy()

Removes the Payment Element from the DOM and destroys it. A destroyed Element cannot be re-mounted to the DOM.

5. paymentElement.focus()

Focuses the Payment Element fields.

6. paymentElement.unmount()

Unmounts the Payment Element from the DOM. Call paymentElement.mount to re-attach it to the DOM.

7. paymentElement.update(options)

Updates the options the Payment Element was initialized with. Updates are merged into the existing configuration. This uses the same API as elements.create().

8. paymentElement.on(type, handler)

Last updated