petercossey

Payment Middleware API Flow for External Payment Integrations

Overview

This document outlines the required API flow for a payment middleware service that integrates an external payment provider with BigCommerce using a custom payment form.

The flow is also referenced in the following screencast: Replacing payment section of default checkout and loading order confirmation page (Loom video 5mins)

This app also provides a demo of the flow in the "External Payment" section of the checkout explorer UI: https://bigcommerce-checkout-external-payment.replit.app/

petercossey

<script>
(function() {
  // Store the original XMLHttpRequest
  const OriginalXHR = window.XMLHttpRequest;
  
  // Store the original fetch (we'll use this for our side requests)
  const originalFetch = window.fetch;
  
  // Create a unique ID for this interceptor
  const interceptorId = 'xhr-' + Math.random().toString(36).substr(2, 9);

petercossey

petercossey

petercossey

Neovim Day 1 Cheatsheet

Modes

• ESC - Return to NORMAL mode
• i - Enter INSERT mode (insert before cursor)
• v - Enter VISUAL mode
• A - Enter INSERT mode at end of line

Basic Movement (in NORMAL mode)

• h j k l - Left, down, up, right

petercossey

petercossey

Absolute Adjustment Example

PUT https://api.bigcommerce.com/stores/{{store_hash}}/v3/inventory/adjustments/absolute

{
    "reason": "hourly sync 20241204-2014",
    "items": [
        {
 "location_id": 1,

petercossey

query productById($productId: Int!) {
  site {
    product(entityId: $productId) {
      id
      entityId
      name
      sku
      variants {
        edges {
          node {

petercossey

{{#partial "page_bottom"}}
<script>
    // Get product IDs for GraphQL query on product prices.
    const pickListProductIds = []
    {{#each product.options}}
        {{#if partial '===' 'product-list'}}
            pickListProductIds.push({{pluck values 'data'}})
        {{/if}}
    {{/each}}
    

petercossey

const storefrontCartUrl = "https://peters-everything-store.mybigcommerce.com/api/storefront/carts"
const getCart = async (url) => {
    try {
        const response = await fetch(url, {
          "method": "GET",
          "headers": {
            "Content-Type": "application/json"
        }});
        const json = await response.json();
        return json;