Swell JS

https://github.com/swellstores/swell-js
Admin
Swell.js is a universal JavaScript client for Swell's Frontend API, enabling headless ecommerce...
Tokens:6,143
Snippets:24
Trust Score:7.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Stripe Server-side Library (npm)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Instructions for installing the Stripe Node.js server-side library using npm. This library is used to access the Stripe API and create payment intents.

```bash
npm i --save stripe
```

--------------------------------

### Initialize Swell.js and Fetch Products

Source: https://github.com/swellstores/swell-js/blob/master/examples/skypack/index.html

This snippet shows how to import and initialize the Swell.js SDK with your store ID, public key, and URL. It then demonstrates fetching a paginated list of products filtered by category and displays the results on the page.

```javascript
import swell from 'https://cdn.skypack.dev/swell-js';
window.swell = swell;

swell.init('YOUR_STORE_ID_HERE', 'YOUR_PUBLIC_KEY_HERE', {
  useCamelCase: true,
  url: 'YOUR_STORE_URL_HERE',
});

swell.products
  .list({
    category: 'equipment',
    limit: 25,
    page: 1,
  })
  .then((response) => {
    const el = document.getElementById('products');
    el.innerHTML = JSON.stringify(response.results, null, ' ');
  });

// CSS for styling (not part of the executable code snippet)
// #products {
//   margin: auto;
//   max-width: 80ch;
// }
```

--------------------------------

### Initialize and Use Swell.js (JavaScript)

Source: https://github.com/swellstores/swell-js/blob/master/test/umd.html

Demonstrates initializing Swell.js with store credentials and fetching a list of products. It also shows an example of using a utility function for rounding. Assumes the Swell.js library is loaded via UMD.

```javascript
const storeId = 'STORE\_ID';
const publicKey = 'PUBLIC\_KEY';
smell.init(storeId, publicKey, { useCamelCase: true });
smell.products.list().then((products) => {
  console.log(products.results);
});
console.log(swell.utils.round(10));
```

--------------------------------

### Swell Billing Setup and Order Creation

Source: https://github.com/swellstores/swell-js/blob/master/saferpay.md

Demonstrates how to update a Swell cart with billing information obtained from Saferpay and then submit the order. This involves mapping Saferpay's payment details to Swell's billing structure.

```js
const billing = {
  method: 'card',
  card: {
    token: RegistrationResult.Alias.Id,
    exp_month: PaymentMeans.Card.ExpMonth,
    exp_year: PaymentMeans.Card.ExpYear,
    brand: PaymentMeans.Brand.Name,
    last4: "[last 4 characters from 'PaymentMeans.Card.MaskedNumber']",
    gateway: 'saferpay',
  },
};

// Using Swell JS library
await swell.cart.update({ billing });
await swell.cart.submitOrder();

// Using Swell Node.js library
const cart = await swell.put('/carts/<id>', { billing });
await swell.post('/orders', { cart_id: cart.id });
```

--------------------------------

### Get Product by Slug or ID

Source: https://github.com/swellstores/swell-js/wiki/Products

Retrieves a single product by its unique slug or ID.

```javascript
// By slug
await swell.products.get('blue-shoes');

// By ID
await swell.products.get('5c15505200c7d14d851e510f');
```

--------------------------------

### Initialize Stripe.js (Client-side JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Demonstrates how to initialize the Stripe.js library on the client-side when loaded via a script tag, using a publishable key.

```javascript
// Client side
const stripe = Stripe('pk_test_...);
```

--------------------------------

### Initialize Stripe.js (Client-side JS Module)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to initialize Stripe.js when using it as a JavaScript module imported via npm, using `loadStripe` and a publishable key.

```javascript
// Client side
import { loadStripe } from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_...);
```

--------------------------------

### Initialize Stripe Server-side Library (Node.js)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Demonstrates how to initialize the Stripe Node.js server-side library using a secret key. This is required for server-side operations.

```javascript
// Server side
const stripe = require('stripe')('sk_test_...);
```

--------------------------------

### List Products

Source: https://github.com/swellstores/swell-js/wiki/Products

Returns all products with offset pagination using `limit` and `page`. Supports a maximum of 100 items per page.

```javascript
await swell.products.list({
  limit: 25, // Max. 100
  page: 1,
});
```

--------------------------------

### List Products with Variants

Source: https://github.com/swellstores/swell-js/wiki/Products

Returns all products and their active variants, with offset pagination using `limit` and `page`. Supports a maximum of 100 items per page.

```javascript
await swell.products.list({
  limit: 25, // Max. 100
  page: 1,
  expand: ['variants'],
});
```

--------------------------------

### Search Products

Source: https://github.com/swellstores/swell-js/wiki/Products

Performs a full-text search across product fields using AND syntax. Returns matching products with offset pagination using `limit` and `page`. Supports a maximum of 100 items per page.

```javascript
await swell.products.list({
  search: 'black jeans', // Any text string
  limit: 25, // Max. 100
  page: 1,
});
```

--------------------------------

### Saferpay Payment Page Initialization and Assertion Workflow

Source: https://github.com/swellstores/swell-js/blob/master/saferpay.md

This APIDOC entry outlines the Saferpay Payment Page JSON API workflow for initializing a transaction and asserting the payment. It includes request structures for initialization and assertion, along with their respective response formats, detailing the necessary parameters and data flow for a complete payment process.

```APIDOC
POST: /Payment/v1/PaymentPage/Initialize
  Description: Initializes a Saferpay payment transaction.
  Request Body:
    {
      "RequestHeader": {
        "SpecVersion": "[current Spec-Version]",
        "CustomerId": "[your customer id]",
        "RequestId": "[unique request identifier]",
        "RetryIndicator": 0
      },
      "TerminalId": "[your terminal id]",
      "Payment": {
        "Amount": {
          "Value": "100",
          "CurrencyCode": "CHF"
        },
        "OrderId": "Id of the order",
        "Description": "Description of payment"
      },
      "RegisterAlias": {
        "IdGenerator": "MANUAL",
        "Id": "[unique random value]"
      },
      "PaymentMethods": ["[card payment methods]"],
      "ReturnUrls": {
        "Success": "[your shop payment success url]",
        "Fail": "[your shop payment fail url]"
      }
    }
  Response Body:
    {
      "ResponseHeader": {
        "SpecVersion": "[current Spec-Version]",
        "RequestId": "Id of the request"
      },
      "Token": "234uhfh78234hlasdfh8234e1234",
      "Expiration": "2015-01-30T12:45:22.258+01:00",
      "RedirectUrl": "https://www.saferpay.com/vt2/api/..."
    }
  Notes: Save 'Token' and 'RedirectUrl' for subsequent steps. Redirect the customer to 'RedirectUrl'.

POST: /Payment/v1/PaymentPage/Assert
  Description: Captures payment details after customer authorization on the payment page.
  Request Body:
    {
      "RequestHeader": {
        "SpecVersion": "[current Spec-Version]",
        "CustomerId": "[your customer id]",
        "RequestId": "[unique request identifier]",
        "RetryIndicator": 0
      },
      "Token": "234uhfh78234hlasdfh8234e1234" 
    }
  Response Body (partial):
    {
      ...
      "RegistrationResult": {
        "Alias": {
          "Id": "alias35nfd9mkzfw0x57iwx"
        }
      },
      "PaymentMeans": {
        "Brand": {
          "PaymentMethod": "VISA",
          "Name": "VISA Saferpay Test"
        },
        "DisplayText": "9123 45xx xxxx 1234",
        "Card": {
          "MaskedNumber": "912345xxxxxx1234",
          "ExpYear": 2015,
          "ExpMonth": 9,
          "HolderName": "Max Mustermann",
          "CountryCode": "CH"
        }
      }
    }
  Notes: Use the 'Token' from the Initialize response. The 'RegistrationResult.Alias.Id' and 'PaymentMeans' details are used for billing setup.
```

--------------------------------

### Include Stripe.js (HTML)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to include the Stripe.js library directly from a CDN in an HTML page. This is the first step for client-side Stripe integrations.

```html
<script src="https://js.stripe.com/v3/"></script>
```

--------------------------------

### Handle Card Action (Client-side JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Demonstrates handling the client-side action required for payment authorization, typically used after creating a PaymentIntent with `confirmation_method: 'manual'`. This may redirect the user.

```javascript
// Client side
const stripe = Stripe('pk_test_...);

await stripe.handleCardAction(paymentIntent.client_secret);
```

--------------------------------

### Create Klarna Payment Source with Stripe.js

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Demonstrates how to create a Klarna payment source using the Stripe.js library on the client side. This involves specifying payment details like amount, currency, country, and redirect URLs. The output is a source object containing a URL for customer redirection.

```js
const stripe = Stripe('pk_test_...');

await stripe.createSource({
  type: 'klarna',
  flow: 'redirect',
  amount: '<amount>',
  currency: '<iso currency code>',
  klarna: {
    product: 'payment',
    purchase_country: '<2-digit country code>',
  },
  source_order: {
    items: '<items>',
  },
  redirect: {
    return_url: '<return_url>',
  },
 });
```

--------------------------------

### Create Payment Method (Client-side JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Demonstrates creating a Stripe PaymentMethod for iDEAL using the iDEAL element and customer billing details. This method is then used to create a PaymentIntent.

```javascript
// Client side
await stripe.createPaymentMethod({
  type: 'ideal',
  ideal: idealElement,
  billing_details: {
    name: 'Jenny Rosen',
  },
});
```

--------------------------------

### List Products by Category

Source: https://github.com/swellstores/swell-js/wiki/Products

Returns products belonging to a specific category, identified by its slug or ID. Uses offset pagination with `limit` and `page`. Supports a maximum of 100 items per page.

```javascript
await swell.products.list({
  category: 't-shirts', // Slug or ID
  limit: 25, // Max. 100
  page: 1,
});
```

--------------------------------

### Create Bancontact Payment Source with Stripe.js

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Illustrates the client-side creation of a Bancontact payment source using Stripe.js. Key parameters include the payment type, amount, currency (must be EUR), owner details, and return URL for redirection.

```js
const stripe = Stripe('pk_test_...');

await stripe.createSource({
  type: 'bancontact',
  amount: '<amount>',
  currency: 'eur', // Bancontact must always use Euros
  owner: {
    name: '<name>',
  },
  redirect: {
    return_url: '<return_url>',
  },
 });
```

--------------------------------

### Create Payment Intent (Server-side JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to create a Stripe PaymentIntent on the server-side for an iDEAL payment. It requires the payment method ID, amount, currency, and a return URL.

```javascript
// Server side
await stripe.paymentIntents.create({
  payment_method: '<payment_method_id>',
  amount: '<amount in cents>',
  currency: 'eur',
  payment_method_types: 'ideal',
  confirmation_method: 'manual',
  confirm: true,
  return_url: '<return_url>',
});
```

--------------------------------

### Create iDEAL Element (Client-side JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to create an iDEAL bank selection element using Stripe.js. This element is mounted to a DOM element for user interaction.

```javascript
// Client side
const stripe = Stripe('pk_test_...);

const elements = stripe.elements();
const ideal = elements.create('idealBank', options?);
ideal.mount('#stripe-ideal');
```

--------------------------------

### Find Product Variation by Options

Source: https://github.com/swellstores/swell-js/wiki/Products

Resolves the correct price, sale_price, orig_price, and stock_status for a product based on selected options. Options can be an array or an object. Returns a merged object with product and variant values.

```javascript
await swell.products.variation(product, {
  Size: 'Medium',
  Color: 'Turquoise',
});
```

--------------------------------

### Capture Klarna Payment with Swell

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to update a Swell cart or order with Klarna payment details after successful customer authorization. This involves using the obtained source ID to configure the billing information in Swell.

```js
const billing = {
  method: 'klarna',
  klarna: {
    source: '<source_id>',
  },
};

// Using Swell JS library
await swell.cart.update({ billing });

// Using Swell Node.js library
await swell.put('/carts/<id>', { billing });
```

--------------------------------

### Update Swell Cart Billing (JS)

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Shows how to update a Swell cart's billing information with Stripe payment details, including the payment method token and Stripe payment intent ID.

```javascript
const billing = {
  method: 'ideal',
  ideal: {
    token: '<payment_method_id>',
  },
  intent: {
    stripe: {
      id: '<payment_intent_id>',
    }
  },
};

// Using Swell JS library
await swell.cart.update({ billing });

// Using Swell Node.js library
await swell.put('/carts/<id>', { billing });
```

--------------------------------

### Capture Bancontact Payment with Swell

Source: https://github.com/swellstores/swell-js/blob/master/stripe_klarna_ideal.md

Details how to finalize a Bancontact payment by updating the Swell cart or order with the payment source information. This step is performed after the customer completes the authorization process and is redirected back.

```js
const billing = {
  method: 'bancontact',
  bancontact: {
    source: '<source_id>',
  },
};

// Using Swell JS library
await swell.cart.update({ billing });

// Using Swell Node.js library
await swell.put('/carts/<id>', { billing });
```
Tokens:
Raw