Shoppable Article
A reader is on a publisher’s article (review, recommendation, tutorial) where specific products are referenced. Embedded Buy Now buttons next to product mentions let the reader purchase without leaving the article. Cart, address, and payment render inline as a slide-in panel.
This is the canonical Publisher Commerce pattern. The reader’s reading flow is preserved — they can buy, close the panel, and continue reading.
Recommended setup
| Choice | Default | Why |
|---|---|---|
| Integration pattern | Embedded Buy Button | Keeps the reader in the article |
| Auth | Browser session | Per-reader article session |
| Payment | Google Pay (mobile), Card via JWE, PayPal Express | Wallet auth is the fastest checkout path for a reader who is mid-article |
| Attribution | UTM params + publisher identifier + article identifier | Publisher’s analytics know which articles drive orders |
API sequence
The flow follows the Single Product Purchase shape. The Buy Now button names the SKU directly through the Embedded Buy Button embed — no live discovery needed.
| Step | Endpoint |
|---|---|
| 1. Bootstrap session | POST /api/v1/browser-session |
| 2. Add to cart | POST /cart/line-items |
| 3. Set shipping address | POST /cart/shipping-info |
| 4. Pick shipping method | POST /cart/shipment/methods |
| 5. (Optional) Get delivery availability | POST /cart/shipments/get-availability |
| 6. (If required) Get + set merchant consents | GET /cart/consents → PUT /cart/consents |
| 7. Get payment public key | GET /payment/key |
| 8. Complete order | POST /payment/complete-order |
The valid shipping_method_ids for step 4 come from the cart itself — cart.shipments[].shipping_method_options, populated by step 3 (set-shipping-info). get-availability (step 5) is optional and returns delivery dates, time slots, or pickup locations for scheduled-delivery or in-store-pickup shipments — not shipping methods. Steps 2–6 build the cart, so step 8 finalizes it with complete-order (body: encrypted_card + billing_info); use place-order only for the one-shot create-cart-and-order call.
Considerations the article surface owns
- Buy Now button placement. Buttons go near the product mention, not at the end of the article. Readers should not have to scroll back to find the buy CTA after reading about the product.
- Inline checkout panel. When the reader clicks Buy Now, the checkout opens as a slide-in panel or modal that doesn’t displace the article content. Closing the panel returns the reader to where they were.
- Cart badge. A persistent cart indicator (e.g., a small badge in the corner) shows the reader that items have been added. Accumulating several items across multiple Buy Now clicks is the Curated Product Roundup pattern — see that page when an article references several products.
- Sticky behavior on long articles. For long-form pieces, the cart badge stays visible as the reader scrolls.
- Inline confirmation. Order success surfaces inline — the reader gets confirmation in the panel and continues reading. The merchant’s full thank-you page is linked but not forced.
Related
- Single Product Purchase Flow — full API walkthrough
- Embedded Buy Button pattern
- Curated Product Roundup — multi-item variant