FAQ

How do I initiate Affirm checkout in a modal instead of redirect checkout flow?

When you send a Sessions service request, you receive merchantURL as one of the fields in a successful Sessions reply. If you'd like to render Affirm checkout in a modal instead of redirecting the user to the Affirm checkout, you would need to retrieve the checkout_token/preapprovalToken prior to initiating a redirect to the "merchantURL". You can then use the checkout_token to initiate the checkout in a Affirm modal using Affirm.js. You should also add additional callback functions to redirect to the same success_url and cancel_url value that was sent in the Sessions service. The onSuccess() callback should also initiate the authorization request using the checkout_token before confirming the order on your site.

Sample PHP code can be found below, where you can retrieve the public_api_key from the Merchant Portal and the version of Affirm.js used should correspond to whether you're publishing your changes to a sandbox or production environment:

<?php
  $checkoutToken = $processorToken; //Replace $processorToken value with "processorToken"value from the Sessions Reply
?>
<html>
  <head>
  </head>
  <body>
    <script>
      //Include Affirm.js
      var _affirm_config = {
      public_api_key: "your_public_apikey", // Public API Key retrieved from the Affirm dashboard
      script:         "https://cdn1-sandbox.affirm.com/js/v2/affirm.js" //Affirm.js runtime script
      };
      (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
 
      //Use the checkout token to create checkout request for modal checkout
      affirm.checkout({
        "checkoutAri"  : "<?php echo $checkoutToken ?>",
        "metadata": {
          "mode": "modal"
         }
        });
    </script>
    <script>
      // Open modal checkout and add callbacks
      affirm.checkout.open({
        onFail: function(a){/* Add code to redirect to ap_sessions_cancel_url=http://cancel.example.com */},
        onSuccess: function(a){ /* Add code to redirect to ap_sessions_success_url=http://success.example.com and use the checkoutToken as preapprovalToken for authorizing a payment */ }
        });
    </script>
  </body>
</html>