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.

This guide shows you how to include Affirm.js and Affirm Checkout on your web page to create an Affirm virtual card.

1. Configurer 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.

2. Créer l’objet de paiement

When a customer chooses Affirm to pay for a purchase, a checkout object containing the order details is created with affirm.checkout.open_vcn() so that Affirm can render the checkout flow. When the customer completes their purchase, you must handle the callbacks or leverage redirects. See below for a sample checkout object:

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.

3. Lancez la caisse et gérez les rappels

After you create the checkout object, you can launch the Affirm checkout modal using the affirm.checkout.open_vcn() function. When the customer confirms their Affirm loan, we send a javascript callback on success or on error, depending on the outcome. In the event of a successful checkout, you can retrieve the card details and the checkout_id from the callback.

🚧

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: There was an error. Includes the checkout_id for the attempt and the reason why it failed.
• 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 : Omettre les détails de la carte et récupérer les checkout_token détails 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"
}

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?

A: This error typically occurs when the Affirm script hasn't fully loaded before the checkout and open_vcn methods are called. To resolve this, wrap the Affirm checkout and open_vcn method calls within the affirm.ui.ready method. Below is a solution that has assisted multiple merchants:

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
          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.