Modal vs Redirect Checkout
Learn about modal checkout.
Overview
Affirm enables your customers to go through the Affirm loan application flow using our Modal or Redirect checkout.
Modal
Users go through the Affirm flow in a modal while remaining on your site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from affirm.js
instead of HTTP.
Redirect
Users are redirected to Affirm's site, where they authenticate and go through the checkout flow. Once they complete checkout, they're returned to the merchant site.
Modal Checkout
- Add a metadata flag to your checkout object.
- Define callback functions (optional).
Add a metadata flag to your checkout object
Enable modal checkout by adding a new parameter to the checkout object metadata.
{
...,
"metadata": {
"mode": "modal"
},
...
}
mode
optional enum. Set to modal
to enable the modal checkout flow (default uses redirect checkout flow).
Define callback functions (optional)
The affirm.checkout.open()
function accepts an argument object where you can define success and failure callback functions.
{
onFail: function(){yourAffirmCancelFunction()},
onSuccess: function(success_object){yourAffirmSuccessFunction(success_object)},
onOpen: function(){yourAffirmOpenFunction()},
onValidationError: function(){yourAffirmCheckoutValidationFunction()}
}
onFail
optional function. Called when the customer exits, cancels, or is declined in the Affirm checkout flow.
onSuccess
optional function. Called when the customer confirms their Affirm loan. Receives success_object, which contains the checkout_token.
onOpen
optional function. Called when the customer successfully loads the Affirm checkout flow.
onValidationError
optional function. Called when there was a validation error with the checkout request submitted.
Test modal checkout
After implementing modal checkout, call affirm.checkout.open()
. The modal checkout flow appears in a lightbox modal above your page contents. Use the following code to test your modal checkout.
affirm.checkout.open({
onFail: function(){
console.log("User cancelled the Affirm checkout flow")},
onSuccess: function(a){
console.log("Affirm checkout successful, checkout token is: " + a.checkout_token)},
onOpen: function(token){
console.log("Affirm modal was opened successfully, checkout token is: " + token)},
onValidationError: function(a) {
console.log("onValidationError, respond to bad data here", a)}
});
Example code
Example checkout object
affirm.checkout({
"merchant": {
"user_confirmation_url": "https://merchantsite.com/confirm",
"user_cancel_url": "https://merchantsite.com/cancel",
"user_confirmation_url_action": "GET",
"name": "Your Customer-Facing Merchant Name"
},
"metadata": {
"mode": "modal",
},
"shipping":{
"name":{
"first":"Joe",
"last":"Doe"
},
"address":{
"line1":"633 Folsom St",
"city":"San Francisco",
"state":"CA",
"zipcode":"94107",
"country":"USA"
},
"phone_number": "4151234567",
"email": "[email protected]"
},
"billing":{
"name":{
"first":"Joe",
"last":"Doe"
},
"address":{
"line1":"633 Folsom St",
"city":"San Francisco",
"state":"CA",
"zipcode":"94107",
"country":"USA"
},
"phone_number": "4151234567",
"email": "[email protected]"
},
"items": [{
"display_name": "Awesome Pants",
"sku": "ABC-123",
"unit_price": 1999,
"qty": 3,
"item_image_url": "http://merchantsite.com/images/awesome-pants.jpg",
"item_url": "http://merchantsite.com/products/awesome-pants.html"
}],
"discounts": {
"RETURN5": {
"discount_amount": 500,
"discount_display_name": "Returning customer 5% discount"
}
},
"shipping_amount": 1000,
"tax_amount": 500,
"total": 6997
});
Appendix
Third-party cookies
The modal checkout experience will be degraded if third-party cookies are not allowed and disabled within a browser's privacy and security settings. If third-party cookies are blocked, the Affirm checkout flow will require users to re-authenticate even if the "Remember my device" option is selected.
To allow third-party cookies, please follow the guides below for Google Chrome and Safari browsers.
Chrome
Go to Preferences > Advanced > Content Settings > Cookies.
Safari
1. Go to Safari > Settings for This Website... .
2. Uncheck Enable content blockers.
Updated about 2 months ago