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.
1. hyper.confirmPayment(options)
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)
hyper.elements(options)
This method creates an Elements instance, which manages a group of elements.
3.hyper.confirmCardPayment(clientSecret,data?,options?)
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
3. hyper.retrievePaymentIntent(clientSecret)
hyper.retrievePaymentIntent(clientSecret)
Retrieve a PaymentIntent using its client secret.
4. hyper.paymentRequest(options)
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.
1. elements.getElement(type)
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
1. paymentElement.mount(domElement)
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()
paymentElement.blur()
Blurs the Payment Element.
3. paymentElement.clear()
paymentElement.clear()
Clears the values of the Payment Element.
4. paymentElement.destroy()
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()
paymentElement.focus()
Focuses the Payment Element fields.
6. paymentElement.unmount()
paymentElement.unmount()
Unmounts the Payment Element from the DOM. Call paymentElement.mount to re-attach it to the DOM.
7. paymentElement.update(options)
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)
paymentElement.on(type, handler)
Last updated