ExpressCheckout UI
Learn how to use the ExpressCheckout UI component on your site or in your app to securely accept digital wallet payments
The ExpressCheckout component lets you embed an express checkout for digital wallets inside your website or application. Currently, only Apple Pay is supported.
Usage
This component lets you add a robust low-code way to accept payments from a digital wallet to your pages or apps.
See Library URLs for important information about embedded components library URLs.
Step 1: Include the Payabli component
Add the script to the <body>
element of your HTML.
You need to include <meta charset="UTF-8">
in the <head>
element of your HTML to prevent problems with special characters such as ‘á’ or ‘ñ’.
Step 2: Define the component container
Add the container to your HTML. This <div>
tag is where the page renders the component. The ID is the identifier for rootContainer
in your component configuration.
Step 3: Configure the component
Define the component configuration in a script block immediately after component.js and create an instance of the component. See the Configuration section for a full reference of options.
Step 4: Style the component
Information about styling embedded components is available in Embedded Components Overview.
Configuration reference
These are the configuration parameters available for the ExpressCheckout component.
The component accepts only the data below. If you need to pass more data than what’s supported, consider using the temporary token flow.
Accepted values are: methodEmbedded
, methodLightbox
, vterminal
, or expressCheckout
.
Use expressCheckout
for digital wallet acceptance.
Container ID used for the component.
API token for authentication. This should be a public API token, as described here.
When the API token belongs to an organization, the entrypoint name identifies the target paypoint (merchant).
Complete URL of a custom CSS stylesheet to use with the component.
Configuration for the express checkout functionality.
Triggered when the ExpressCheckout component is ready to use.
Triggered upon successful completion of a digital wallet transaction.
Triggered if an error occurs during the digital wallet transaction.
Triggered if the user cancels the digital wallet transaction.
Response examples
functionCallbackReady response
This response is triggered when the component is ready to use.
When true
, the component is ready to accept Apple Pay.
Not in use yet.
functionCallbackSuccess response
When a transaction is successfully completed via the ExpressCheckout component, the functionCallBackSuccess response is triggered.
In the response, the referenceId
is the transaction ID you can use for other operations.
“Success” or “Declined”
Container for response details.
Boolean indicating whether the operation was successful. A true
value indicates success. A false
value indicates failure.
Auxiliary validation used by Payabli in payment pages and components.
The payment method used. Possible values include “apple_pay”, “google_pay”, etc.
functionCallBackError response
This response is triggered if an error occurs during the transaction.
The payment method used. Possible values include “apple_pay”, “google_pay”, etc.
Container for error details when an error occurs.
functionCallBackCancel response
This response is triggered when the user cancels the transaction while the modal is shown.
Container for response data.
The digital wallet method used. Currently, only apple_pay
is supported.
Combine components
If you want to accept digital wallet payments along with card or ACH payments, you can load both the EmbeddedMethod UI and ExpressCheckout UI components on the same page. You can also use updateConfig
to switch between component configurations on your page.
The code example renders the components in this image:
Was this page helpful?