Open Affirm Virtual Card Checkout

Use affirm.checkout.open_vcn() to open Affirm Checkout in a modal for your customers, an Affirm-hosted page to securely complete the loan checkout. When the customer completes their purchase, you'll need to handle the callbacks.

affirm.checkout.open_vcn(checkout_data)

Method arguments


MethodData typeDescription
checkout_data
required
objectSee details.

Returns

Returns callbacks that resolve in a card_checkout, error_response or checkout_validation_error. Those objects have either:

  • card_checkout: A card object was successfully created.
  • error_response: There was an error. Includes the checkout_id for the attempt and the reason why it failed.
  • checkout_validation_error: There was a validation error with the checkout request submitted.
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)
    }
 });

Retrieve full card details via success callback

{
    billing_address: {
        city: "San Francisco",
        state: "CA",
        zipcode: "94108",
        line1: "650 California St.",
        line2: "12th Floor"
    },
    checkout_token": "FA0UUFRGOND84S7C",
    created: "2020-01-24T20:00:50.712662",
    cvv: "123",
    number: "4111111111111111",
    callback_id: "5473686c-1dc4-4153-b9a7-abfccc00ef3a",
    cardholder_name: "AffirmInc John doe",
    expiration: "0121",
    charge_ari: "35PW-YI16"
}

Alternative success callback: Omit card details and retrieve the checkout_token client-side and obtain card details via your server

{
  callback_id: "5473686c-1dc4-4153-b9a7-abfccc00ef3a",
  checkout_token: "FA0UUFRGOND84S7C",
  created: "2020-01-24T20:00:50.712662",
  id: "FA0UUFRGOND84S7C"
}

🚧

You can configure that the card details should only be returned on the server-side. Please contact Affirm.