Ouvrir le paiement par carte virtuelle Affirm

Disponibilité des pays

Liste des pays ⬇️

USA

Canada

Aperçu

Starting a payment with Affirm on the web with a virtual card consists of creating a checkout form, tokenizing customer information securely, and generating a virtual card. You can then process the card through your existing payment gateway.

Ce guide vous démontre la manière d'inclure Affirm.js et Affirm Checkout sur votre page web pour créer une carte virtuelle Affirm.

Étapes de mise en œuvre

Étape 1 : Mise en place d'Affirm.js

Include the following script in the head section on every page on your site. This script should always be loaded directly from the Affirm domain.

🚧

Utilisez uniquement les clés API et le domaine Sandbox à des fins de test et de développement

Cela garantit que vous ne modifiez pas accidentellement vos transactions actuelles. Affirm ne génère pas de vraies cartes virtuelles dans l'environnement de test. Le cas échéant, veuillez communiquer avec votre responsable technique pour les tests en direct.

<script>
const _affirm_config = {
		public_api_key: "YOUR_PUBLIC_API_KEY", /* replace with public api key */
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "en_US",
		country_code: "USA",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>

Voir les codes régionaux et nationaux pris en charge.

Après avoir ajouté le script ci-dessus, une instance définie d'Affirm est créée sur votre client. Vous aurez accès aux méthodes de l'objet Affirm pour déclencher plusieurs actions.

Étape 2 : Créer l’objet de paiement

Lorsqu'un client choisit Affirm pour payer un achat, un objet de paiement contenant les détails de la commande est créé avec affirm.checkout.open_vcn() afin qu'Affirm puisse rendre le flux de paiement. Lorsque le client finalise son achat, vous devez gérer les rappels ou exploiter les redirections. Vous trouverez ci-dessous un exemple d'objet de paiement :

const checkoutObject = {
  merchant: {
    user_confirmation_url: 'https://merchantsite.com/confirm',
    user_cancel_url: 'https://merchantsite.com/cancel',
    user_confirmation_url_action: 'POST',
    name: 'Your Customer-Facing Merchant Name',
    use_vcn: true,
  },
  shipping: {
    name: {
      first: 'Joe',
      last: 'Doe',
    },
    address: {
      street1: '633 Folsom St',
      street2: 'Floor 7',
      city: 'San Francisco',
      state: 'CA',
      zipcode: '94107',
      country: 'USA',
    },
    phone_number: '4153334567',
    email: '[email protected]',
  },
  billing: {
    name: {
      first: 'Joe',
      last: 'Doe',
    },
    address: {
      street1: '633 Folsom St',
      street2: 'Floor 7',
      city: 'San Francisco',
      state: 'CA',
      zipcode: '94107',
      country: 'USA',
    },
    phone_number: '4153334567',
    email: '[email protected]',
  },
  items: [
    {
      display_name: 'Awesome Pants',
      sku: 'ABC-123',
      unit_price: 10000,
      qty: 3,
      item_image_url: 'http://merchantsite.com/images/awesome-pants.jpg',
      item_url: 'http://merchantsite.com/products/awesome-pants.html',
      categories: [
        ['Apparel', 'Pants'],
        ['Mens', 'Apparel', 'Pants'],
      ],
    },
  ],
  discounts: {
    RETURN5: {
      discount_amount: 500,
      discount_display_name: 'Returning customer 5% discount',
    },
    PRESDAY10: {
      discount_amount: 1000,
      discount_display_name: "President's Day 10% off",
    },
  },
  metadata: {
    shipping_type: 'UPS Ground',
    mode: 'modal',
  },
  order_id: 'JKLMO4321',
  currency: 'USD',
  financing_program: 'zero_pct_promo',
  shipping_amount: 1000,
  tax_amount: 600,
  total: 30100,
};

affirm.checkout.open_vcn(checkoutObject)

Pour des informations supplémentaires, voir l'objet de paiement ou la recette de l'objet de paiement dont le lien figure ci-dessous.

Arguments de méthode

🚧

Note:

• Notre produit de carte virtuelle ne prend en charge que le mode modal. Le paiement Affirm s'ouvre dans une fenêtre modale qui flotte au-dessus de votre page de paiement. Ceci est indiqué dans l’objet de paiement lors du réglage du paramètre mode sur modal.
• Définissez le paramètre use_vcn sur true pour que les détails de la carte soient générés à l'origine du prêt.
• affirm.checkout() valide les données requises dans l'objet checkout.

Étape 3 : Lancez la caisse et gérez les rappels

Après avoir créé l'objet caisse, vous pouvez lancer la modale Affirm checkout à l'aide de la fonction affirm.checkout.open_vcn() . Lorsque le client confirme son prêt Affirm, nous envoyons un rappel javascript en cas de succès ou d'erreur, selon le résultat. En cas de paiement réussi, vous pouvez récupérer les détails de la carte et le checkout_id à partir du rappel.

🚧

Note:

Si vous ne souhaitez pas récupérer les détails de la carte du côté client, nous pouvons les renvoyer du côté serveur uniquement via notre API Read Card (pour des raisons PCI). Contactez le service d'aide aux commerçants pour plus d'informations.

Retours

Les rappels des retours qui se résolvent dans un :

• card_checkout: un objet de carte a bien été créé.
• error_response: Une erreur s'est produite. Inclut le checkout_id de la tentative et le reason pour laquelle elle a échoué.
• checkout_validation_error: Une erreur de validation s'est produite avec la requête de paiement envoyée.

affirm.checkout.open_vcn({
      success: function(card_checkout) {
         console.log(card_checkout);
      },
      error: function(error_response) {
        console.log(error_response);
      },
      onValidationError: function(checkout_validation_error) {
      console.log(checkout_validation_error)
    }
 });

Récupération des détails complets de la carte via un success callback

{
    billing_address: {
        city: "San Francisco",
        line1: "650 California St.",
        line2: "12th Floor",
 		state: "CA",
        zipcode: "94108"
    },
   callback_id: "b67350e8-ad14-4844-8230-adc6e5f3e490",
   cardholder_name: "AffirmInc John Doe",
   charge_ari: "GDC3-MKAG",
   checkout_token: "RTKS63U383SZ9GY7",
   created: "2023-05-18T16:10:57.300017",
   cvv: "123",
   expiration: "0122",
   id: "RTKS63U383SZ9GY7",
   number: "4111111111111111"

Rappel de succès alternatif : Omettez les détails de la carte et récupérez le checkout_token du côté client, et obtenez les détails de la carte via votre serveur

{
  callback_id: "b67350e8-ad14-4844-8230-adc6e5f3e490",
  charge_ari: "GDC3-MKAG",
  checkout_token: "RTKS63U383SZ9GY7",
  created: "2023-05-18T16:10:57.300017",
  id: "RTKS63U383SZ9GY7"
}

Étape 4 : Gestion des cartes

Lorsque vous recevez les détails de la carte à partir de la réponse de paiement ou de l'API Read Card, vous pouvez soumettre des autorisations, des captures et des remboursements à la carte virtuelle à l’aide de vos rails de paiement existants.

FAQ

🚩

Resolving "affirm.checkout.open_vcn is not a function" Error in VCN Integration

Q: How do I fix the error "affirm.checkout.open_vcn is not a function" when using Affirm's checkout methods?

R : Cette erreur se produit généralement lorsque le script Affirm n'a pas été entièrement chargé avant que les méthodes caisse et open_vcn ne soient appelées. Pour résoudre ce problème, intégrez les appels aux méthodes Affirm Checkout et open_vcn dans la méthode affirm.ui.ready. Vous trouverez ci-dessous une solution qui a aidé de nombreux commerçants :

JavaScript

affirm.ui.ready(function() {
  affirm.checkout(checkoutObj);
  affirm.checkout.open_vcn({
      success: function(card_checkout) {
          //On successful loan confirmation Affirm will trigger this function
          //This function will be used to pass CC number to your CC processor
          //You will need to handle redirecting to a success page here as well
          console.log(card_checkout);
      },
      error: function(error_response) {
          //On Cancel or decline Affirm will trigger the following function
          //You will need to handle redirecting to an error page here
          console.log(error_response);
      }
  });
});

In this solution, the success function is used for processing successful loan confirmations, including passing credit card details to your processor and redirecting to a success page. The error function handles cancellations or declines by redirecting to an error page. This workaround ensures that Affirm's methods are only called after the script is fully loaded, effectively preventing the error.