Search

Are you looking for test card numbers?

Would you like to contact support?

Drop-in for web

Accept popular payment methods with a single front-end implementation.

See sample code

  Explore Web Drop-in on GitHub.

Drop-in is our all-in-one UI solution that you can add on your payments form so you can start accepting transactions for key payment methods using a single front-end implementation. To see a complete list of all payment methods supported in Drop-in, see Drop-in payment methods.

If you are new to integrating with Adyen, see our Online payments page for an overview of integration options and available features.

Drop-in is supported from v49 and later of the /paymentMethods, /payments, and /payments/details endpoints.

How Drop-in works

First you have to submit API requests from your server, then pass parts of the responses to your front end. Drop-in takes the responses as input, renders the UI for the corresponding shopper action, and provides the data that you will need to pass on your next API request.

The following general flow applies for each payment method supported in Drop-in:

On this page we talk about both server-side and client-side integration steps:

  1. From your server, submit a request to get a list of payment methods available to the shopper.
  2. Create an instance of Drop-in on your payments form.
  3. From your server, submit a payment request with the data returned by Drop-in.
  4. Determine from the response if you need to perform additional actions on your front end.
  5. From your server, submit additional payment details with the data returned by Drop-in.
  6. Present the payment result to the shopper.

When you have completed the integration, proceed to test your integration.

Before you begin

Before you start integrating with our online payments API, make sure that you have performed the following steps:

  1. Sign up for an Adyen test account at https://www.adyen.com/signup
  2. Get your API Key. Save a copy as you need it for API calls you make to the Adyen payments platform.
  3. Install one of our Libraries to connect with the Adyen APIs.
  4. If you're building for multiple merchants, provide some basic information so that we can offer you better support.

For more information on these steps, refer to Get started with Adyen.

Step 1: Get available payment methods

First, you need to get a list of payment methods available to your shopper:

  1. Make a POST /paymentMethods call, providing:

    • merchantAccount: Your merchant account name. 
    • countryCode: The shopper's country.
    • amount: The currency and value of the payment. 
    • channel: The platform of the shopper's device. Use Web.

    We use the countryCodeamount, and channel to tailor the list of payment methods to your shopper.

    curl https://checkout-test.adyen.com/v49/paymentMethods \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{
      "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
      "countryCode": "NL",
      "amount": {
        "currency": "EUR",
        "value": 1000
      },
      "channel": "Web"
    }'
    # Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen::Client.new
    adyen.api_key = "YOUR_X-API-KEY"
    
    response = adyen.checkout.payment_methods({
      :merchantAccount => 'YOUR_MERCHANT_ACCOUNT',
      :countryCode => 'NL',
      :amount => {
        :currency => 'EUR',
        :value => 1000
      },
      :channel => 'Web'
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    Client client = new Client(xApiKey,Environment.TEST);
    
    Checkout checkout = new Checkout(client);
    PaymentMethodsRequest paymentMethodsRequest = new PaymentMethodsRequest();
    paymentMethodsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
    paymentMethodsRequest.setCountryCode("NL");
    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(1000L);
    paymentMethodsRequest.setAmount(amount);
    paymentMethodsRequest.setChannel(PaymentMethodsRequest.ChannelEnum.WEB);
    PaymentMethodsResponse response = checkout.paymentMethods(paymentMethodsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = array(
      "merchantAccount" => "YOUR_MERCHANT_ACCOUNT",
      "countryCode" => "NL",
      "amount" => array(
        "currency" => "EUR",
        "value" => 1000
      ),
      "channel" => "Web"
    );
    $result = $service->paymentMethods($params);
    #Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen.Adyen()
    adyen.client.xapikey = 'YOUR_X-API-KEY'
    
    result = adyen.checkout.payment_methods({
      'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
      'countryCode': 'NL',
      'amount': {
        'value': 1000,
        'currency': 'EUR'
      },
      'channel': 'Web',
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    var client = new Client ("YOUR-X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    var amount = new Model.Checkout.Amount("EUR", 1000);
    var paymentMethodsRequest = new Model.Checkout.PaymentMethodsRequest(MerchantAccount: "YOUR_MERCHANT_ACCOUNT")
    {
       CountryCode = "NL",
       Amount = amount,
       Channel = "Web"
    };

    A list of available paymentMethods is returned in the response, including the required fields if there are any. If you want to know more about the properties returned in the response, see the response parameters in our API Explorer.

    {
     "paymentMethods":[
      {
        "details":[...],
        "name":"Credit Card",
        "type":"scheme"
        ...
      },
      {
        "details":[...],
        "name":"SEPA Direct Debit",
        "type":"sepadirectdebit"
      },
      ...
      ]
    }
  2. Pass the response to your front end. You will use this in the next step to specify which payment methods are available for the shopper.

Next, add Drop-in to your payments form.

Step 2: Add Drop-in to your payments form

To use Drop-in on your payments form, you need to:

  1. Include the following script in the <body> above any other JavaScript in your checkout page: 

    <script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js"></script>
  2. Use the following CSS file:

    <link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.css"/>

    You can add your own styling by overriding the rules of this CSS file.

  3. Create a DOM element on your checkout page, placing it where you want Drop-in to be rendered.

    <div id="dropin"></div>
  4. Create an instance of AdyenCheckout. Add the following code on your checkout page, specifying:

    • locale: The shopper's locale. This is used to set the language rendered in the Components. For a list of supported locales, see Localization.
    • environment: Use test, and then change this to live when you're ready to accept live payments.  
    • originKey: The Origin Key of your website. To find out how to generate one, see How to get an Origin Key.
    • paymentMethodsResponse: The available payment methods for the shopper, returned in step 1.
    const configuration = {
      locale: "en_US",
      environment: "test",
      originKey: "YOUR_ORIGIN_KEY",
      paymentMethodsResponse: paymentMethodsResponse
    };
    const checkout = new AdyenCheckout(configuration);
  5. Create an instance of Drop-in and include configuration for specific payment methods, if required. Some payment methods require additional configuration before you can start accepting payments. See the supported payment methods and select the links for for configuration details.

    • paymentMethodsConfiguration: Include other required or optional configuration here.

    Next, assign functions to handle the following events. Aside from these events, you can also use other events listed in Configuring Drop-in.

    • onSubmit: Called when the shopper selects the Pay button.
    • onAdditionalDetails: Called when additional information is required to complete the payment.

    Then, mount the container.

    const dropin = checkout
    .create('dropin', {
      paymentMethodsConfiguration: {
        applepay: { //Example configuration
          configuration: { //Required configuration for Apple Pay
            merchantName: 'Adyen Test merchant', // Name to be displayed on the form
            merchantIdentifier: 'adyen.test.merchant' // Your Apple merchant identifier as described https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequest/2951611-merchantidentifier
          },
        },
        card: { //Example optional configuration for Cards
          hasHolderName: true,
          holderNameRequired: true,
          enableStoreDetails: true,
          name: 'Credit or debit card'
        }
      },
      onSubmit: (state, dropin) => {
        makePayment(state.data)
          // Your function calling your server to make the /payments request
          .then(action => {
            dropin.handleAction(action);
            // Drop-in will handle the action object from the /payments response
          })
          .catch(error => {
            throw Error(error);
          });
        },
      onAdditionalDetails: (state, dropin) => {
        makeDetailsCall(state.data)
          // Your function calling your server to make a /payments/details request
          .then(action => {
            dropin.handleAction(action);
            // Drop-in will handle the action object from the /payments/details response
          })
          .catch(error => {
            throw Error(error);
          });
        }
    })
    .mount('#dropin');
  6. When the shopper selects the Pay button, Drop-in will call the onSubmit event, which will contain a state.data. Pass the state.data to your server.
{
  isValid: true,
  data: {
    paymentMethod: {
      type: "scheme",
      encryptedCardNumber: "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
      encryptedExpiryMonth: "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
      encryptedExpiryYear: "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
      encryptedSecurityCode: "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+.."
      holderName: "S. Hopper"
    }
  }
}

Next, submit a payment request from your server.

Step 3: Make a payment

  1. From your server, make a POST /payments request specifying the parameters described below, along with other parameters that might be required for your integration.

    For example, you need to include additional fields if you are implementing 3D Secure 2 native or 3D Secure redirect authentication.

    • amount
    • reference: Your unique reference for this payment.
    • paymentMethod: The state.data.paymentMethod from the onSubmit event from your front end.
    • returnUrl: URL to where Drop-in will take your shopper back to after a redirection.
    • merchantAccount: Your merchant account name.
    curl https://checkout-test.adyen.com/v49/payments \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{
      "amount":{
        "currency":"EUR",
        "value":1000
      },
      "reference":"YOUR_ORDER_NUMBER",
      "paymentMethod":"DROP_IN_STATE_DATA",
      "returnUrl":"https://your-company.com/checkout/",
      "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
    }'
    # Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen::Client.new
    adyen.api_key = "YOUR_X-API-KEY"
     
    response = adyen.checkout.payments({
      :amount => {
        :currency => "EUR",
        :value => 1000
      },
      :reference => "YOUR_ORDER_NUMBER",
      :paymentMethod => {
        :type => "scheme",
        :encryptedCardNumber => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        :encryptedExpiryMonth => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        :encryptedExpiryYear => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        :encryptedSecurityCode => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
      },
      :returnUrl => "https://your-company.com/checkout/",
      :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    Client client = new Client(xApiKey,Environment.TEST);
     
    Checkout checkout = new Checkout(client);
    PaymentsRequest paymentsRequest = new PaymentsRequest();
    paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(15000L);
    paymentsRequest.setAmount(amount);
    String encryptedCardNumber = "adyenjs_0_1_18$...encryptedCardNumber";
    String encryptedExpiryMonth = "adyenjs_0_1_18$...encryptedExpiryMonth";
    String encryptedExpiryYear = "adyenjs_0_1_18$...encryptedExpiryYear";
    String encryptedSecurityCode = "adyenjs_0_1_18$...encryptedSecurityCode";
    paymentsRequest.setReference("Your order number");
    paymentsRequest.addEncryptedCardData(encryptedCardNumber,encryptedExpiryMonth, encryptedExpiryYear, encryptedSecurityCode, "John Smith");
    paymentsRequest.setReturnUrl("https://your-company.com/...");
    PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = array(
      "amount" => array(
        "currency" => "EUR",
        "value" => 1000
      ),
      "reference" => "YOUR_ORDER_NUMBER",
      "paymentMethod" => array(
        "type" => "scheme",
        "encryptedCardNumber" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        "encryptedExpiryMonth" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        "encryptedExpiryYear" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        "encryptedSecurityCode" => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
      ),
      "returnUrl" => "https://your-company.com/checkout/",
      "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
    );
    $result = $service->payments($params);
    #Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen.Adyen()
    adyen.client.xapikey = 'YOUR_X-API-KEY'
    
    result = adyen.checkout.payments({
       'amount': {
          'value': 1000,
          'currency': 'EUR'
       },
       'reference': 'YOUR_ORDER_NUMBER',
       'paymentMethod': {
          'type': 'scheme',
          'encryptedCardNumber': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
          'encryptedExpiryMonth': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
          'encryptedExpiryYear': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
          'encryptedSecurityCode': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...'
       },
       'returnUrl': 'https://your-company.com/...',
       'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    var client = new Client ("YOUR_X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    
    var amount = new Model.Checkout.Amount("EUR", 1000);
    var details = new Model.Checkout.DefaultPaymentMethodDetails{
      Type = "scheme",
      EncryptedCardNumber = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      EncryptedExpiryMonth = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      EncryptedExpiryYear = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      EncryptedSecurityCode = "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
    };
    var paymentsRequest = new Model.Checkout.PaymentRequest
    {
      Reference = "YOUR_ORDER_NUMBER",
      Amount = amount,
      ReturnUrl = @"https://your-company.com/...",
      MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
      PaymentMethod = details
    };
    
    var paymentResponse = checkout.Payments(paymentsRequest);

    Response

    Depending on the payment result, you'll receive a response containing:

    • resultCode: If the payment was successful, you will get an Authorised result code. For other possible resultCode values and the actions that you need to take, see Result codes.
    • action: If you get this object in the response, this means that you need to perform additional actions on your front end to complete the payment. Pass this object to your front end and perform step 4. Drop-in will use the information in this object to continue with the payment flow.
    • pspReference: Our unique identifier for the transaction.
    • refusalReason: Returned with resultCode Error or Refused. See refusal reasons for possible values.
    {
    "resultCode":"IdentifyShopper",
    "action":{
      "paymentMethodType":"scheme",
      "token":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY...",
      "type":"threeDS2Fingerprint"
    },
    "authentication":{
      "threeds2.fingerprintToken":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY..."
    },
    "details":[
      {
        "key":"threeds2.fingerprint",
        "type":"text"
      }
    ],
    "paymentData":"Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+..."
    }
  2. The next steps depend on if you received an action object in the response.
    • If you received an action object, you need to perform both step 4 and step 5.
    • If you did not get an action object, proceed to step 6 to present the payment result to your shopper.

Step 4: Perform additional actions on your front end

  1. If your server received an action object in the /payments response, pass the object back to your front end. Make sure that you only pass the action object and not the full response.

    Drop-in will handle additional actions required for the payment method. For example, redirecting to issuer's website and getting the 3D Secure 2 device fingerprint for authentication.

     dropin.handleAction(action);

    After Drop-in completes the action, it will call the onAdditionalDetails event, which will contain a state.data.

    {
    data:
      details: {
        threeds2.fingerprint: "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ=="
      }
    paymentData: "Ab02b4c0!BQABAgAKspbjN8+5..."
    }
  2. Next, pass the state.data to your server.

Step 5: Submit additional payment details

If you performed an additional action on your front end in step 4, you need to submit the results to your server.

  1. From your server, make a POST /payments/details request specifying:

    • details: This is the state.data from the onAdditionalDetails event.
    curl https://checkout-test.adyen.com/v49/payments/details \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d 'DROPIN_STATE_DATA'
    # Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen::Client.new
    adyen.api_key = "YOUR_X-API-KEY"
    
    response = adyen.checkout.payments.details({
      :details => {
        :payload => "sdfsdfsdf..."
      }
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    Client client = new Client(xApiKey,Environment.TEST);
    
    Checkout checkout = new Checkout(client);
    PaymentDetailsRequest paymentDetailsRequest = new PaymentDetailsRequest();
    HashMap<String, String> details = new HashMap<>();
    details.put("payload", "sdfsdfsdf...");
    paymentsDetailsRequest.setDetails(details);
    PaymentsResponse paymentsResponse = checkout.paymentDetails(PaymentDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = array(
      "details" => array(
        "payload" => "sdfsdfsdf..."
      )
    );
    $result = $service->paymentDetails($params);
    #Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen.Adyen()
    adyen.client.xapikey = 'YOUR_X-API-KEY'
    
    result = adyen.checkout.payments_details({
       'details': {
          'payload': 'sdfsdfsdf...'
       }
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    var client = new Client ("YOUR_X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    
    var details = new Dictionary<string, string>
    {
      { "payload", "Ab02b4c0..." }
    };
    var paymentsDetailsRequest = new Model.Checkout.PaymentsDetailsRequest(Details: details);
    var paymentResponse = checkout.PaymentDetails(paymentsDetailsRequest);

    Depending on the payment result, you'll receive a response containing:

    • resultCode: If the payment was successful, you will get an Authorised result code. For other possible resultCode values and the actions that you need to take, see Result codes.
    • action: If you get this object again in the response, this means that you need to perform step 4 again. Drop-in will use the information in this object to continue with the payment flow.
    • pspReference: Our unique identifier for the transaction.
    • refusalReason: Returned with resultCode Error or Refused. See refusal reasons for possible values.
    {
     "pspReference": "88154795347618C",
     "resultCode": "Authorised"
    }
    {
     "pspReference": "89783918347627F",
     "refusalReason": "Not enough balance",
     "resultCode": "Refused"
    }
  2. The next steps depend on if you received an action object in the response.
    • If you received an action object, perform both step 4 and step 5 again.
    • If you did not get an action object, proceed to the next step to present the payment result to your shopper.

Step 6: Present the payment result

If you do not receive an action object from your last API request, this means that the payment has been completed.

You can optionally show the status and a message on Drop-in. For example:

  dropin.setStatus('success');
  dropin.setStatus('success', { message: 'Payment successful!' });

  dropin.setStatus('error');
  dropin.setStatus('error', { message: 'Something went wrong.'});

Use the resultCode from the response to present the payment result to your shopper on your front end. For example:

  • If you get an Authorised result code, inform the shopper that the payment was successful.
  • If you get an Error or Refused result code, inform the shopper that the payment failed.
  • If you get a Pending or Received resultCode, inform the shopper that you've received their order, and are waiting for the payment to be processed. To receive payment status updates, set up your notification webhooks.

Check out your specific payment method page for the possible result codes that you might receive, or see this list of Result codes for recommended messages that you can present to your shopper.

Notification webhooks

Although in most cases the resultCode you received from the /payments or /payments/details endpoints already indicate the payment result, notifications are the only way to know about the outcome of a payment in cases where:

  • The resultCode is Pending or Received.
  • The shopper completed the payment but failed to return to your website or app.

Make sure that you set up your notification webhooks so you can receive payment status updates.

After we know the outcome of a payment, we will send you a notification containing:

  • eventCode: AUTHORISATION
  • success: Indicates the outcome of the payment. Possible values:

    • true: The payment was successful.
    • false: The payment failed.

Refer to Notification request item to see all the information returned in a notification.

Testing and going live

Before going live, use our list of test cards and other payment methods to test your integration. We recommend testing each payment method that you intend to offer to your shoppers.

You can check the status of a test payment in your Customer Area, under TransactionsPayments.

When you've completed testing, there are some additional steps you need to complete before you can accept live payments from shoppers. Refer to Getting started with Adyen for more information. 

When you're ready to move to production, you'll have to switch from test to our live endpoints. See Live endpoints for more information.

Configuring Drop-in

You can include the following additional configuration when instantiating Drop-in on your payments form:

  • amount: Amount to be displayed on the Pay Button. It expects an object with the value and currency properties. For example, { value: 1000, currency: 'USD' }.
  • openFirstPaymentMethod: When enabled, it will open the first payment method automatically on page load. Defaults to true.
  • openFirstStoredPaymentMethod: When enabled, it will open the payment method with stored card details on page load. This option will take precedence over openFirstPaymentMethod. Defaults to true.
  • showStoredPaymentMethods: Shows or hides payment methods with stored card details. Defaults to true.
  • showPaymentMethods: Shows or hides regular payment methods, useful if you only want to show payment methods with stored card details. Defaults to true.
  • showPayButton: Show or hides a Pay Button for each payment method. Defaults to true. The Pay button triggers the onSubmit event.

    If you want to disable the button and then trigger the submit flow on your own, set this to false and call the .submit() method from your own button implementation.

    dropin.submit()

Events

Use the following events to to include additional logic on your checkout page:

  • onSubmit(state, dropin): Called when the shopper clicks the Pay button.
  • onAdditionalDetails(state, dropin): Called when a payment method requires more details.
  • onError(error): Called when an error occurs in the Drop-in.
  • onReady(): Called when Drop-in is initialized and is ready for use.
  • onSelect(component): Called when the shopper selects a payment method.

Supported payment methods for Drop-in

The following payment methods are supported in Drop-in. If you have questions about payment methods not on the list below or those that do not have linked pages, contact our Support Team.

Payment method
 Web 
  iOS  
  Android  
AfterPay
-white_check_mark-
Apple Pay
-white_check_mark-
BCMC Mobile
-white_check_mark-
Cards, including 3D Secure 1 and 3D Secure 2
authentication
-white_check_mark-
-white_check_mark-
-white_check_mark-
Stored card details
-white_check_mark-
-white_check_mark-
Dragonpay
-white_check_mark-
Dotpay
-white_check_mark-
-white_check_mark-
-white_check_mark-
Entercash
-white_check_mark-
-white_check_mark-
-white_check_mark-
EPS
-white_check_mark-
-white_check_mark-
-white_check_mark-
giropay
-white_check_mark-
Google Pay
-white_check_mark-
iDEAL
-white_check_mark-
-white_check_mark-
-white_check_mark-
MOLPay
-white_check_mark-
-white_check_mark-
-white_check_mark-
Open banking
-white_check_mark-
-white_check_mark-
-white_check_mark-
QiwiWallet
-white_check_mark-
Redirect payment methods
(For example, UnionPay)
-white_check_mark-
-white_check_mark-
-white_check_mark-
SEPA Direct Debit
-white_check_mark-
-white_check_mark-
WeChat Pay
-white_check_mark-

We're actively adding payment methods to Drop-in. To check the latest on Drop-in and Components, see our release notes.

Next steps