Manage default payment methods in the Dashboard

By default, VINR applies the eligible payment methods you manage in Dashboard → Settings → Payment methods to every PaymentIntent and SetupIntent. You do not need to specify payment_method_types — VINR selects the right methods automatically based on the transaction's currency, country, and your account configuration.

Payment methods Ask

By default, VINR enables cards and other common payment methods. You can turn individual payment methods on or off in the Dashboard. In Checkout, VINR evaluates the currency and any restrictions, then dynamically presents the supported payment methods to the customer.

To see how your payment methods appear to customers, enter a transaction ID or set an order amount and currency in the Dashboard.

You can enable Apple Pay and Google Pay in your payment methods settings. By default, Apple Pay is enabled and Google Pay is disabled. However, in some cases VINR filters them out even when they're enabled — for example, Google Pay is filtered if you enable automatic tax without collecting a shipping address.

Apple Pay and Google Pay work automatically on VINR-hosted checkout pages — no additional integration required.

Update your payment flows Ask

Choose the upgrade path that matches your current VINR integration.

If your integration uses a Card Element or individual payment method Elements, we recommend migrating to the Payment Element. This single, unified integration lets you accept a wide range of payment methods, and any new methods you enable in the Dashboard appear automatically without code changes.

Create the PaymentIntent

Specifying the automatic_payment_methods.enabled parameter is optional. If you don't specify it, VINR assumes a value of true, which enables Dashboard-managed payment methods by default.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
});

Client-side confirmations

If your integration uses VINR.js to confirm payments with confirmPayment or by payment method, your existing process remains the same and requires no further changes.

When confirming payments, we recommend providing the return_url parameter to support payment methods that require a redirect.

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const { error } = await vinr.confirmPayment({
    // `Elements` instance used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/return_url',
    },
  });

  if (error) {
    // Only reached if there is an immediate error when confirming the payment.
    // Show the error to your customer (for example, incomplete payment details).
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

import React, { useState } from 'react';
import { useVinr, useElements, PaymentElement } from '@vinr/react';

const CheckoutForm = () => {
  const vinr = useVinr();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const handleSubmit = async (event: React.FormEvent) => {
    // Prevent default form submission, which would refresh the page.
    event.preventDefault();

    if (!vinr || !elements) {
      // VINR.js hasn't loaded yet — disable form submission until it has.
      return;
    }

    const { error } = await vinr.confirmPayment({
      // `Elements` instance used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/return_url',
      },
    });

    if (error) {
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!vinr}>Submit</button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;

Server-side confirmation

If you use server-side confirmation, you must include the return_url parameter in your integration.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  return_url: 'https://example.com/return_url',
});

Alternatively, create the PaymentIntent with automatic_payment_methods.allow_redirects set to never. This disables the return_url requirement on confirmation. You can still manage payment methods from the Dashboard, but payment methods that require redirects won't be eligible.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  automatic_payment_methods: {
    enabled: true,
    allow_redirects: 'never',
  },
});

Lastly, you can create the PaymentIntent with the payment_method_types parameter. This also disables the return_url requirement on confirmation, but with this option you can't manage payment methods from the Dashboard.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  payment_method_types: ['card'],
});

If your integration uses Checkout and Payment Links, upgrade your API version to adopt Dashboard-managed payment methods without making changes to your integration code.

If your integration confirms payments with the off_session parameter set to true, your existing process remains the same and requires no further changes.

Otherwise, you must provide the return_url parameter in your integration.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  return_url: 'https://example.com/return_url',
});

Alternatively, set automatic_payment_methods.allow_redirects to never to disable the return_url requirement. Payment methods that require redirects won't be eligible, but you can still manage all other methods from the Dashboard.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  automatic_payment_methods: {
    enabled: true,
    allow_redirects: 'never',
  },
});

Or specify payment_method_types explicitly. This disables both the return_url requirement and Dashboard management of payment methods.

import { Vinr } from '@vinr/sdk';

const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });

const paymentIntent = await vinr.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  confirm: true,
  payment_method: 'PAYMENTMETHOD_ID',
  payment_method_types: ['card'],
});

Was this page helpful?

Manage default payment methods in the Dashboard

Payment methodsAskCopy

Update your payment flowsAskCopy

Create the PaymentIntent

Client-side confirmations

Server-side confirmation

On this page

Payment methods Ask

Update your payment flows Ask