--- updatedAt: 2025-11-13T14:07:29.000Z agentTools: siteIndex: https://docs.affirm.com/llms.txt projectIndex: https://docs.affirm.com/developers/llms.txt --- # Open Affirm Checkout Use the affirm.checkout.open() function to direct customers to Affirm's secure payment portal. Learn how to initialize checkout, configure the checkout object, and implement callback functions for success, failure, and validation handling. {`

Country Availability

USA USA
Canada Canada
UK UK
`} ## Overview Using the `affirm.checkout.open()` function, you can direct your customers to Affirm's secure payment portal. This guide outlines the steps for executing this feature. ## Implementation Steps ### Using JavaScript for Initialization Initiate the checkout process by creating your checkout object with `affirm.checkout()`. To transition the customer to the Affirm Checkout portal, call `affirm.checkout.open()`. ```javascript Open Affirm Checkout JS Initiate affirm.ui.ready(function(){ affirm.checkout(checkoutObject); affirm.checkout.open(); }) ``` ### Example Here's a code example to guide you through the process: ```javascript Open Affirm Checkout Object affirm.checkout({ "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" }, "shipping":{ "name":{ "first":"Joe", "last":"Doe" }, "address":{ "line1":"633 Folsom St", "line2":"Floor 7", "city":"San Francisco", "state":"CA", "zipcode":"94107", "country":"USA" }, "phone_number": "4153334567", "email": "joedoe@123fakestreet.com" }, "billing":{ "name":{ "first":"Joe", "last":"Doe" }, "address":{ "line1":"633 Folsom St", "line2":"Floor 7", "city":"San Francisco", "state":"CA", "zipcode":"94107", "country":"USA" }, "phone_number": "4153334567", "email": "joedoe@123fakestreet.com" }, "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", "categories": [ ["Home", "Bedroom"], ["Home", "Furniture", "Bed"] ] } ], "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":"flyus_3z6r12r", "shipping_amount":1000, "tax_amount":500, "total":100000 }); affirm.checkout.open(); ``` For additional information, please refer to our [Checkout Object](https://docs.affirm.com/developers/reference/the-checkout-object) page or Checkout Object recipe linked below. ## Parameters and Callbacks ### Method Arguments | Parameter | Type | Description | | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | `checkoutObject` | Required | The object containing the [data payload](https://docs.affirm.com/developers/reference/the-checkout-object) for customer checkout. | ### Callback Mechanisms Note that this method typically doesn't return a value. Set redirection URLs using the checkout object. If your metadata setting is 'modal,' implement the following callback functions: * **onFail**: Called when the customer exits, cancels or is declined in the Affirm checkout flow. * **onSuccess**: Triggered upon successful confirmation of the Affirm loan. This function yields a success object, which contains a `checkout_id`. Note that this `checkout_id` will be the value used to authorize the loan in the following Authorization request. The default onSuccess will complete a form submission to the `user_confirmation_url` with the method defined by `user_confirmation_url_action`. Specifying an `onSuccess` callback will override the default functionality. * **onOpen**: Called when Affirm Checkout is successfully initialized on the user interface. * **onValidationError**: Alerts you in case of a validation error during the checkout request. ```javascript Open Affirm Checkout Callback // Callback example affirm.checkout.open({ onFail: function(error) { // Error handling }, onSuccess: function(checkout) { // Success procedures }, onOpen: function(token) { // Initialization successful }, onValidationError: function(checkout_validation_error) { // Validation error handling } }); ``` # Sibling pages * [Checkout Overview](https://docs.affirm.com/developers/docs/affirm-checkout-overview.md) * [About Express Checkout](https://docs.affirm.com/developers/docs/express-checkout.md) * [Set up Express Checkout](https://docs.affirm.com/developers/docs/set-up-express-checkout.md) * [Checkout Button](https://docs.affirm.com/developers/docs/pre-styled-checkout-button.md) * [Open Affirm Virtual Card Checkout](https://docs.affirm.com/developers/docs/open-affirm-virtual-card-checkout.md) * [Modal vs. Redirect Checkout](https://docs.affirm.com/developers/docs/modal-vs-redirect-checkout.md) * [Modal with Direct Checkout](https://docs.affirm.com/developers/docs/modal-with-direct-checkout.md) * [Additional Features](https://docs.affirm.com/developers/docs/additional-features.md)