Integrate Affirm checkout and capture a transaction after fulfillment

Steps

1. Include the Affirm JS snippet on your checkout page, initialized with your public API key; use Affirm.ui.ready() to ensure the SDK is loaded before rendering promotional messaging widgets.
2. On checkout, construct the checkout object in JavaScript with 'merchant' details, 'shipping' and 'billing' address objects, 'items' array with SKU/price/quantity, 'discounts', 'tax_amount', and 'total' in cents.
3. Call affirm.checkout(checkoutObject) and then affirm.checkout.open() to launch the Affirm loan application modal; provide a success callback that receives a 'checkout_token'.
4. Send the 'checkout_token' to your server; authorize the charge server-side: POST /api/v2/charges with the checkout_token, using HTTP Basic auth with your private API key. A successful response returns a charge object with 'id' and status 'authorized'.
5. When you ship the order, capture the charge: POST /api/v2/charges/{charge_id}/capture — only capture the amount actually shipped; Affirm supports partial captures for partial fulfillment.
6. Handle void (cancel before capture) and refund (after capture) via POST /api/v2/charges/{charge_id}/void and POST /api/v2/charges/{charge_id}/refund respectively.