How it works

Learn about how PXP's Drop-in solution works.

Overview

Checkout Drop-in is a single, unified payment component that automatically orchestrates multiple payment methods in a beautiful vertical accordion interface. It's built on top of the Checkout SDK, reusing all the same secure payment logic while providing a dramatically simplified integration experience.

Screenshot of a drop-in with collapsed payment methods

Key benefits

Five-line integration: Get a complete checkout running in days, not weeks. Perfect for merchants who want speed over customisation.
Zero PCI scope: All sensitive card data is tokenised by PXP's Token Vault — your servers never touch payment data.
Automatic 3DS authentication: Intelligent risk-based 3D Secure authentication happens automatically when required, with no additional code needed.
Unified callbacks: One set of callbacks works across all payment methods. Handle success, errors, and validation the same way for cards, PayPal, Google Pay, and Apple Pay.
Automatic payment method expansion: When PXP adds new payment methods, they automatically appear in your drop-in with zero code changes.

Integration steps

A full integration involves the following five high-level steps:

Set up the Unity Portal: To use Checkout Drop-in, you first need to activate the Drop-in service and your chosen payment methods in the Unity Portal. You also need to configure your branding, whitelist domains where the drop-in will be hosted, and set up webhooks for payment verification.
Install the SDK: Install the latest version of the SDK using npm, then import from the drop-in subpath.
Embed Checkout Drop-in: Initialise the drop-in, pass in your session data and transaction details, and mount it.
Handle results: Add proper handling for events and errors. Implement analytics to monitor your customers' payment journeys.
Process and verify transactions: The customer completes their payment through the drop-in. The SDK validates form data, tokenises the card (if needed), and sends the transaction to PXP. After processing, the SDK triggers an onSuccess callback with a result object containing transaction identifiers (result.merchantTransactionId and result.systemTransactionId).

Ready to get started? Follow the Web quickstart or Android quickstart for a complete walkthrough, or jump to the Web implementation guide or Android implementation guide for detailed configuration options.

Supported payment methods

Drop-in automatically detects and displays payment methods based on your Unity session configuration and browser capabilities:

Cards (Visa, Mastercard, American Express, and others)
PayPal (including Venmo and Pay Later for eligible customers)
Google Pay
Apple Pay

Payment methods appear in the order configured in your Unity Portal, and future payment methods will be automatically added to Drop-in as they become available.

UI/UX design

Vertical accordion layout

The drop-in uses a mobile-first vertical accordion design:

Only one payment method is expanded at a time
The top payment method is expanded by default
Beautiful gradient cards with shadows and hover effects
Professional SVG logos for payment methods
Smooth animations on expand/collapse
"Secured by PXP" branded footer

Responsive behaviour

The drop-in automatically adapts to different screen sizes to ensure an optimal user experience across all devices:

Mobile (< 576px): Full-width cards, stacked fields, touch-optimised buttons
Tablet (576-768px): Comfortable spacing, responsive padding
Desktop (> 768px): Optimal spacing, hover effects active

Supported transaction intents

During initialisation, you specify the transaction intent for each payment method. The intent determines how the payment is processed and when funds are captured.

Card intents

Cards support the following transaction intents:

Intent	Description	Use cases
`Authorisation`	Reserve funds on the customer's payment method without capturing them. Capture later when ready to fulfill.	Physical goods: Authorise at checkout, capture when shipped Delayed fulfillment: Reserve funds until service is delivered Pre-orders: Hold funds before product is available
`EstimatedAuthorisation`	Reserve funds based on an estimated amount. Final capture amount can differ from initial authorisation.	Hotels: Estimate stay cost, adjust final bill Car rentals: Estimate rental, adjust for fuel/damage Restaurants: Pre-authorise with tip, finalise after service
`Purchase`	Capture funds immediately after authorisation. Single-step payment.	Digital goods: Instant delivery (ebooks, software, licenses) Subscriptions: Immediate access to services Event tickets: Instant confirmation required
`Verification`	Verify the card is valid without charging or reserving funds ($0 authorisation).	Save card for later: Validate before storing Age verification: Confirm card holder's age Card testing: Check card is active and valid

Google Pay and Apple Pay intents

Google Pay and Apple Pay support the following transaction intents:

Intent	Description	Use cases
`Authorisation`	Reserve funds for later capture.	Physical goods: Quick checkout, capture on shipment Delayed fulfillment: Reserve for services
`Purchase`	Capture funds immediately.	Digital goods: Instant one-click purchases In-app purchases: Frictionless buying Quick checkout: Fast payment for any goods

PayPal intents

PayPal supports the following transaction intents:

Intent	Description	Use cases
`Authorisation`	Authorise a payment to be captured later ("Confirm Payment" flow).	Physical goods: Authorise now, capture when shipped Custom orders: Reserve funds during production Pre-orders: Hold funds before item is available
`Purchase`	Capture payment immediately ("Pay Now" flow).	Digital goods: Instant delivery Services: Immediate access Event tickets: Instant confirmation

Supported payment currencies

Drop-in supports the following payment currencies:

Currency code	Currency name	Supported?
`AED`	United Arab Emirates Dirham
`AFN`	Afghan Afghani
`ALL`	Albanian Lek
`AMD`	Armenian Dram
`AOA`	Angolan Kwanza
`ARS`	Argentine Peso
`AUD`	Australian Dollar
`AWG`	Aruban Florin
`AZN`	Azerbaijani Manat
`BAM`	Bosnia and Herzegovina Convertible Mark
`BBD`	Barbados Dollar
`BDT`	Bangladeshi Taka
`BGN`	Bulgarian Lev
`BHD`	Bahraini Dinar
`BIF`	Burundian Franc
`BMD`	Bermudian Dollar
`BND`	Brunei Dollar
`BOB`	Boliviano
`BOV`	Bolivian Mvdol (funds code)
`BRL`	Brazilian Real*
`BSD`	Bahamian Dollar
`BTN`	Bhutanese Ngultrum
`BWP`	Botswana Pula
`BYN`	Belarusian Ruble
`BZD`	Belize Dollar
`CAD`	Canadian Dollar
`CDF`	Congolese Franc
`CHE`	WIR Bank (complementary currency)
`CHF`	Swiss Franc
`CHW`	WIR Bank (complementary currency)
`CLF`	Unidad de Fomento (funds code)
`CLP`	Chilean Peso
`CNY`	Chinese Yuan
`COP`	Colombian Peso
`COU`	Unidad de Valor Real
`CRC`	Costa Rican Colon
`CUP`	Cuban Peso
`CVE`	Cape Verde Escudo
`CZK`	Czech Koruna
`DJF`	Djiboutian Franc
`DKK`	Danish Krone
`DOP`	Dominican Peso
`DZD`	Algerian Dinar
`EGP`	Egyptian Pound
`ERN`	Eritrean Nafka
`ETB`	Ethiopian Birr
`EUR`	Euro
`FJD`	Fiji Dollar
`FKP`	Falkland Islands Pound
`GBP`	Pound Sterling
`GEL`	Georgian Lari
`GHS`	Ghanian Cedi
`GIP`	Gibraltar Pound
`GMD`	Gambian Dalasi
`GNF`	Guinean Franc
`GTQ`	Guatemalan Quetzal
`GYD`	Guyanese Dollar
`HKD`	Hong Kong Dollar
`HNL`	Honduran Lempira
`HTG`	Haitian Gourde
`HUF`	Hungarian Forint
`IDR`	Indonesian Rupiah
`ILS`	Israeli New Sheqel
`INR`	Indian Rupee
`IQD`	Iraqi Dinar
`IRR`	Iranian Rial
`ISK`	Icelandic Króna
`JMD`	Jamaican Dollar
`JOD`	Jordanian Dinar
`JPY`	Japanese Yen
`KES`	Kenyan Shilling
`KGS`	Kyrgyzstani Som
`KHR`	Cambodian Riel
`KMF`	Comoro Franc
`KPW`	North Korean Won
`KRW`	South Korean Won
`KWD`	Kuwaiti Dinar
`KYD`	Cayman Islands Dollar
`KZT`	Kazakhstani Tenge
`LAK`	Lao Kip
`LBP`	Lebanese Pound
`LKR`	Sri Lanka Rupee
`LRD`	Liberian Dollar
`LSL`	Lesotho Loti
`LYD`	Libyan Dinar
`MAD`	Moroccan Dirham
`MDL`	Moldovan Leu
`MGA`	Malagasy Ariary
`MKD`	Macedonian Denar
`MMK`	Myanma Kyat
`MNT`	Mongolian Tugrik
`MOP`	Macanese Pataca
`MRU`	Mauritanian Ouguiya
`MUR`	Mauritian Rupee
`MVR`	Maldivian Rufiyaa
`MWK`	Malawian Kwacha
`MXN`	Mexican Peso
`MXV`	Mexican Unidad de Inversion (UDI) (funds code)
`MYR`	Malaysian Ringgit
`MZN`	Mozambican Metical
`NAD`	Namibian Dollar
`NGN`	Nigerian Naira
`NIO`	Cordoba Oro
`NOK`	Norwegian Krone
`NPR`	Nepalese Rupee
`NZD`	New Zealand Dollar
`OMR`	Omani Rial
`PAB`	Panamanian Balboa
`PEN`	Peruvian Nuevo Sol
`PGK`	Papua New Guinean Kina
`PHP`	Philippine Peso
`PKR`	Pakistani Rupee
`PLN`	Polish Złoty
`PYG`	Paraguayan Guaraní
`QAR`	Qatari Rial
`RON`	Romanian New Leu
`RSD`	Serbian Dinar
`RUB`	Russian Rouble
`RWF`	Rwandan Franc
`SAR`	Saudi Riyal
`SBD`	Solomon Islands Dollar
`SCR`	Seychelles Rupee
`SDG`	Sudanese Pound
`SEK`	Swedish Krona
`SGD`	Singapore Dollar
`SHP`	Saint Helena Pound
`SLE`	Sierra Leonean Leone
`SOS`	Somali Shilling
`SRD`	Surinamese Dollar
`SSP`	South Sudanese Pound
`STN`	São Tomé and Príncipe Dobra
`SVC`	Salvadoran Colón
`SYP`	Syrian Pound
`SZL`	Lilangeni
`THB`	Thai Baht
`TJS`	Tajikistani Somoni
`TMT`	Turkmenistani Manat
`TND`	Tunisian Dinar
`TOP`	Tongan Paʻanga
`TRY`	Turkish Lira
`TTD`	Trinidad and Tobago Dollar
`TWD`	New Taiwan Dollar
`TZS`	Tanzanian Shilling
`UAH`	Ukrainian Hryvnia
`UGX`	Ugandan Shilling
`USD`	United States Dollar
`USN`	United States Dollar (next day) (funds code)
`UYI`	Uruguayan Peso en Unidades Indexadas
`UYU`	Uruguayan Peso
`UYW`	Unidad Previsional
`UZS`	Uzbekistan Som
`VED`	Venezuelan Digital Bolívar
`VES`	Venezuelan Sovereign Bolívar
`VND`	Vietnamese Dồng
`VUV`	Vanuatu Vatu
`WST`	Samoan Tala
`XAD`	Arab Accounting Dinar
`XAF`	CFA Franc BEAC
`XAG`	Silver (one troy ounce)
`XAU`	Gold (one troy ounce)
`XBA`	European Composite Unit
`XBB`	European Monetary Unit
`XBC`	European Unit of Account 9
`XBD`	European Unit of Account 17
`XCD`	East Caribbean Dollar
`XCG`	Caribbean Guilder
`XDR`	Special Drawing Rights
`XOF`	CFA Franc BCEAO
`XPD`	Palladium (one troy ounce)
`XPF`	CFP Franc
`XPT`	Platinum (one troy ounce)
`XSU`	SUCRE
`XTS`	Code reserved for testing
`XUA`	ADB Unit of Account
`YER`	Yemeni Riyal
`ZAR`	South African Rand
`ZMW`	Zambian Kwacha
`ZWG`	Zimbabwe Gold

Get started

Ready to integrate Checkout Drop-in? Follow the quickstart guide for your platform to get started in minutes.

Each guide walks you through creating a session, initialising Drop-in, and handling payments with complete code examples.