Accepter un paiement avec ScalapayVersion bêta privée

Découvrez comment configurer votre intégration avec Scalapay.

Web

Use the Payment Element to embed a custom Stripe payment form in your website or application and offer payment methods to customers. For advanced configurations and customizations, refer to the Accept a Payment integration guide.

Configurer Stripe
Côté serveur

Pour commencer, créez un compte Stripe.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Collecter les informations de paiement
Côté client

Vous êtes prêt à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant au head votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le composant Payment Element à votre page de paiement

The Payment Element needs a place on your checkout page. Create an empty DOM node (container) with a unique ID in your payment form:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec les paramètres mode, amount et currency. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen de paiement dans votre formulaire, veillez à l’activer dans le Dashboard.

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'eur',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’objet Appearance dans les options lors de la création du fournisseur Elements.

Collecter les adresses

Par défaut, le composant Payment Element ne collecte que les informations nécessaires relatives à l’adresse de facturation. Si vous souhaitez obtenir l’adresse de facturation (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison complètes d’un client, utilisez le composant Address Element.

Créer un PaymentIntent
Côté serveur

Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement

Accédez à l’étape 5 du guide « Finaliser » les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise stripe.confirmPayment au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.

Lorsque le client envoie votre formulaire de paiement, utilisez un PaymentIntent pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec les paramètres amount et currency. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient une clé secrète du client. Renvoyez cette valeur côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations du composant Payment Element.

Ajoutez un paramètre return_url à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL return_url. Une fois le paiement par carte abouti, l’utilisateur est immédiatement redirigé vers l’URL return_url.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez définir le paramètre redirect sur if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

FacultatifGérer les événements post-paiement

FacultatifSéparer l'autorisation et la capture

Tester votre intégration

To test your integration, choose the payment method and tap Pay. In a sandbox, this redirects you to a test payment page where you can approve or decline the payment.

In live mode, tapping Pay redirects you to the Scalapay website—you don’t have the option to approve or decline the payment with Scalapay.

Codes d’erreur

Le tableau suivant détaille les codes d’erreur courants et les actions recommandées :

Code d’erreur	Action recommandée
`payment_intent_invalid_currency`	Enter a supported currency.
`missing_required_parameter`	Consultez le message d’erreur pour en savoir plus sur le paramètre requis.
`payment_intent_payment_attempt_failed`	Ce code peut apparaître dans le champ last_payment_error.code d’un PaymentIntent. Consultez le message d’erreur pour connaître la raison détaillée de l’échec et obtenir une suggestion de traitement de l’erreur.
`payment_intent_redirect_confirmation_without_return_url`	Précisez une `return_url` lors de la confirmation d’un PaymentIntent.

Remarque