Introduction to Drop-in Checkout
Harness PPRO’s local payments expertise in your checkout flow
One component. Cards, wallets, bank redirects, BNPL and cash payment methods across 24 markets, ready to render in your existing checkout.
Leveraging PPRO’s extensive expertise in local payments, the Drop-in Checkout SDK simplifies the addition and maintenance of local payment methods and cards. The SDK provides you with an already-optimised UI with high converting payment flows to integrate with your checkout.
Key Benefits
🧱 Low development time: Each payment method ships as a registered React or JavaScript-only component with its own validation rules, copy, and logo. Turn one on with a single line in paymentMethodConfig.
🌐 Pay your way, anywhere: Cards, wallets (Amazon Pay, Cash App Pay, Swish…), bank redirects (iDEAL, BLIK, Pay by Bank…), Stablecoins, BNPL, Pix, Boleto, SEPA Direct Debit. All behind one component.
🔒 Secure by design: Card number and CVV live inside PPRO-hosted iFrames. Your servers never touch raw card data, so your integration stays out of PCI scope.
🎨 Customizable to blend with your checkout: Light and dark themes, floating labels, accordion or tab layouts, custom fields and sections. The appearance and forms props go deep.
💬 24 languages, full overrides: Locales for every market we cover, with per-message overrides for brand voice or compliance tweaks via the messages prop.
🔁 One-time and recurring: First-class recurring flows, SEPA mandate copy, tokenised cards, and support for non-native recurring payments offered by PPRO.
Flexible Integration Options
Simplify your entire payment flow or add individual payment methods
The drop-in checkout can be rendered as the entire payment selector or as individual payment method forms.
By rendering the payment selector, you gain the full functionality of the Drop-in Checkout. It’s simpler to add multiple new payment methods and you’ll benefit from features, such as the smart ordering of payment methods.
Alternatively, you can add individual payment methods to your checkout. This would be the quickest way to add one or two key local payment methods. It also gives you the flexibility to A/B test new payment methods to see if they’re a fit for your customers.
Adapts to your existing checkout flows
Your server creates a session via /payment-sessions, and the SDK collects payment details on the client. You can add an additional T&C step by deferring authorization in onSubmitPayment, or update the amount after the shopper uses a discount code with the PATCH endpoint. You can modify payloads via onSubmitPayment or run inventory and fraud checks before authorization. By default, the SDK sends the authorization request to PPRO, or you can opt to route authorization through your backend.
Updated 18 days ago