> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mangopay.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Checkout SDK overview
export const LogoVisa = ;
export const LogoPayPal = ;
export const LogoMastercard = ;
export const LogoMaestro = ;
export const LogoGooglePay = ;
export const LogoCb = ;
export const LogoApplePay = ;
export const LogoAmex = ;
The Mangopay Checkout SDK is a code-light, customizable solution to power the payment page of your website or app. It simplifies your implementation, improves security, and supports a variety of payment methods.
## Supported payment methods
### Card brands
### APMs
**Note – Currency coverage and usage**
Checkout SDK supports all currencies available for all payment methods.
You must use the same currency for a transaction between your app, Checkout SDK, and calls to the Mangopay API to avoid incompatibility errors.
## Features
* Simplified card tokenization in full compliance with PCI-DSS
* Integrated 3DS handling for secure and seamless payment authentication
* Detection and presentation of user's [co-branded card](/guides/payment-methods/card/co-branded) choice, leveraging Mangopay's [BIN lookup endpoint](/api-reference/payment-method-metadata/lookup-payment-method-metadata)
* Customizable design elements to match your branding
* Localization support for your whole user community
* Compliance with [privacy requirements](/guides/users/privacy)
## How it works
1. The user proceeds to payment on your app or website.
2. You configure and display your chosen payment methods to the user to collect payment information.
3. The user selects the payment method and provides the payment information when required (e.g. card details).
4. The Checkout SDK securely tokenizes the payment data:
* For card payments, with the tokenization server via the Mangopay API to generate a `CardId`
* For Google Pay and Apple Pay, with the payment methods API to generate tokenized payment data
5. You create a delegate function that gets called by the SDK to start payment processing.
6. Your server uses the `CardId` or tokenized payment data to create the transaction via the Mangopay API (pay-in, preauthorization, deposit preauthorization, or card validation).
7. Your delegate function returns the outcome of the transaction.
8. If required, the SDK handles additional redirect actions: 3DS authorization or validation via payment method interface (e.g. PayPal).
9. You present the payment result to the user.
## Flow diagram
The flow is described in the following diagram (numbered steps correspond to those above):
## Resources
Try out the Checkout SDK online
Integrate the Checkout SDK
{/* See the SDK changelog on GitHub */}
{/* */}
{/* */}
## Version policy
The Checkout SDK adheres to [semantic versioning](https://semver.org/) as the standard for versioning packages.
To ensure a smooth integration experience while avoiding potentially breaking changes, we recommend configuring your dependency manager to automatically install only patch updates.
For example, when using the web SDK, you can specify the desired patch version in your `package.json` file using the `~` operator:
```shell Specify patch version theme={null}
"dependencies": {
"@mangopay/checkout-sdk": "~1.1.0"
}
```
This configuration will allow your project to automatically receive patch updates (e.g., `2.0.1`, `2.0.2`, etc.) for bug fixes and minor improvements. However, it will prevent updates to new minor (`2.1.0`) or major (`3.0.0`) versions, which may introduce breaking changes.
{/*
https://swimlanes.io/u/o8rVe6hhV
Title: Checkout SDK – How it works
=: ** Initiation & payment method selection **
User-->App / website: Proceed to payment
App / website->Checkout SDK: **[2]** Initialize SDK
Checkout SDK-->User: Present payment form
User-->Checkout SDK: **[3]** Select payment method (optional: enter card data)
=: ** Tokenization **
if: IF CARD REGISTRATION
Checkout SDK->App / website: **[4]** Call card registration delegate
App / website->Platform: Request card registration
Platform->Mangopay API: POST Create Card Registration
Mangopay API->Checkout SDK: Return Card Registration
Checkout SDK->Checkout SDK: Tokenize card
Checkout SDK->Checkout SDK: Event: onTokenizationCompleted()
end:
if : IF APPLE PAY, GOOGLE PAY
Checkout SDK-->User: **[4]** Launch payment method UI
User-->Checkout SDK: Authorize payment
Checkout SDK->Checkout SDK: Obtain payment token
Checkout SDK->Checkout SDK: Event: onTokenizationCompleted()
end
-: ** LOADING STATE **
=: ** Payment **
Checkout SDK->App / website: **[5]** Call pay-in delegate
App / website->Platform: Request pay-in
Platform->Mangopay API: **[6]** POST Create PayIn (ReturnURL=checkout.mangopay.com)
Mangopay API-->Platform: Return PayIn
Platform-->App / website:**[7]** Return PayIn to delegate
App / website->Checkout SDK: Return PayIn from delegate
if : IF REDIRECTION (3DS, PAYPAL)
Checkout SDK-->User: **[8]** Redirect for authorization or completion
User-->Mangopay API: Authenticate and complete
Mangopay API->Checkout SDK: Return to checkout.mangopay.com
end
Checkout SDK->App / website: Event: onPaymentCompleted()
App / website->Checkout SDK: Dismiss Checkout UI
App / website-->User: **[9]** Present result
*/}