Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Créer une intégration personnalisée avec Elements
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

Mettre à jour dynamiquement les montants des paiements

Apprenez à modifier les montants totaux lorsque les clients changent leur sélection lors du paiement.

Mettez à jour le montant d’une Checkout-Session ou d’un PaymentIntent lorsque les clients modifient leurs achats ou le montant de leur paiement. Recalculez les totaux sur votre serveur, puis mettez à jour le montant du PaymentIntent.

Cas d’usage fréquents

  • Ajouter ou supprimer des produits additionnels (tels qu’un emballage cadeau ou une garantie).
  • Sélectionnez un autre mode de livraison ou un autre délai de livraison.
  • Ajoutez des services ou des débits supplémentaires.
  • Appliquer ou supprimer un code de réduction ou un crédit magasin avant taxes.

Bonnes pratiques en matière de sécurité :

  • Recalculez les montants sur votre serveur. Ne vous fiez pas aux prix ou aux totaux fournis par le client.
  • Autorisez la mise à jour en fonction de vos règles d’entreprise (par exemple, imposez des quantités maximales).
  • Ne mettez à jour que les sessions qui sont actives et non terminées ou expirées.

Contraintes et comportement

  • Vous pouvez mettre à jour le montant lorsque le Payment Intent ou la session Checkout est en attente de paiement (par exemple, requires_payment_method ou requires_confirmation).
  • Après confirmation, vous ne pouvez généralement pas augmenter le montant.

Mettre à jour le SDK client
Côté client

Lorsque vous utilisez Elements avec l’API Checkout Sessions, encapsulez les appels client à votre serveur dans runServerUpdate afin que l’état du paiement et les totaux soient actualisés.

checkout.js
import {loadStripe} from '@stripe/stripe-js';

// Optional: include beta flags if your integration requires them
const stripe = await loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: ['custom_checkout_server_updates_1'],
});

const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {/* ... */},
});

// Example: Add additional service using price_data
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const actions = loadActionsResult.actions;
  const session = actions.getSession();
  document
  .getElementById('add-service')
  .addEventListener('click', async () => {
    const updateOnServer = () =>
      fetch('/update-custom-amount', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          checkout_session_id: session.id,
          product_id: 'gift_wrap', // Server looks up actual price
        }),
      });

    const response = await actions.runServerUpdate(updateOnServer);
    if (!response.ok) {
      // show error state
    }
  });
}

Créer des endpoints de serveur
Côté serveur

Calculez les montants et validez les entrées sur votre serveur. Ensuite, vous pouvez mettre à jour line_items avec price_data pour ajouter des débits ad hoc.

Remarque

La mise à jour de line_items ou price_data recalcule le total de la session et les taxes.

Node
Python
No results
import express from 'express';
import Stripe from 'stripe';

const app = express();
app.use(express.json());

const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
);


// Product catalog with prices - store this securely server-side
const PRODUCTS = {
  gift_wrap: { name: 'Gift Wrap', price: 500 }, // $5.00
  express_shipping: { name: 'Express Shipping', price: 1500 }, // $15.00
  warranty: { name: 'Extended Warranty', price: 2000 }, // $20.00
};

app.post('/update-custom-amount', async (req, res) => {
  try {
    const {checkout_session_id, product_id} = req.body;

    const session = await stripe.checkout.sessions.retrieve(checkout_session_id);
    if (session.status === 'complete' || session.expires_at * 1000 < Date.now()) {
      return res.status(400).json({error: 'Session is no longer updatable.'});
    }

    // Look up product price server-side
    const product = PRODUCTS[product_id];
    if (!product) {
      return res.status(400).json({error: 'Invalid product ID'});
    }

    // Add the additional product via price_data
    const updated = await stripe.checkout.sessions.update(checkout_session_id, {
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: {name: product.name},
            unit_amount: product.price,
          },
          quantity: 1,
        },
      ],
    });

    return res.json({id: updated.id, amount_total: updated.amount_total});
  } catch (err) {
    return res.status(400).json({error: err.message});
  }
});

app.listen(4242, () => console.log('Server running on port 4242'));
Cette page vous a-t-elle été utile ?
OuiNon