Introducing our brand new Rules Engine —
Read the docs
LogoLogo
Core APIOther APIsChangelog
How-tos
How-tos
  • Introduction
  • Product discovery
    • Product listing page
    • Product page
  • Placing orders
    • Shopping cart
      • Creating a shopping cart
      • Adding products to cart
      • Updating cart quantities
      • Removing products from cart
      • Displaying the cart summary
    • Checkout
      • Adding the customer
      • Adding a billing address
      • Adding a shipping address
      • Selecting a shipping method
      • Selecting a payment method
      • Adding a payment source
      • Adding a gift card or coupon
      • Placing the order
    • Subscriptions
      • Configuring a subscription model
      • Selecting the source order
      • Generating the subscriptions
      • Updating the subscriptions
    • Payments
      • Adyen
        • Adding the payment source
        • Sending back the payment details
        • Configuring the notification webhooks
        • Reusing the payment source
      • Axerve
        • Adding the payment source
        • Updating the payment intent
      • Braintree
        • Adding the payment source
        • Sending back the payment method nonce
        • Accepting local payments
        • Reusing the payment source
      • Checkout.com
        • Adding the payment source
        • Getting the payment details
        • Refreshing pending transactions
        • Reusing the payment source
      • Klarna
        • Adding the payment source
        • Sending back the authorization token
        • Reusing the payment source
      • PayPal
        • Adding the payment source
        • Preparing the payment for execution
      • Stripe
        • Adding the payment source
        • Refreshing the payment source
        • Reusing the payment source
      • Manual payments
        • Adding a wire transfer payment source
      • External payments
        • Adding the payment source
        • Reusing the payment source
    • Auto-capture
      • Enabling the auto-capture
      • Limiting the auto-capture amount
  • inventory
    • Inventory strategies
      • No split
      • Split shipments
      • Split by line items
      • Ship from first available (or primary)
      • Ship from primary
  • FAQ
    • Environments and initial setup
    • Authentication and access tokens
On this page
  • Problem
  • Solution
  • Example
  • Additional notes
  • More to read
  1. Placing orders
  2. Payments
  3. Stripe

Adding the payment source

How to add a Stripe payment source to an order

PreviousStripeNextRefreshing the payment source

Last updated 2 years ago

Problem

You have a pending order with a selected payment method that is associated with a Stripe payment integration. You want to give your customer the possibility to select one of the payment sources available from that gateway — e.g. a credit card — and use it to process the payment.

Solution

To add a Stripe payment source to an order, you have to create a Stripe payment source object and associate it with the order, as described in the Checkout guide.

Example

1. Get the payment source type

The following request retrieves the attributes of the payment method associated with the order identified by the "qaMAhZkZvd" ID:

curl -g -X GET \
  'http://yourdomain.commercelayer.io/api/orders/qaMAhZkZvd?include=payment_method' \
  -H 'Authorization: Bearer your-access-token' \
  -H 'Accept: application/vnd.api+json'

On success, the API responds with a 200 OK status code, returning the requested order object and the associated payment method:

{
  "data": {
    "id": "qaMAhZkZvd",
    "type": "orders",
    "links": {
      "self": "https://yourdomain.commercelayer.io/api/orders/qaMAhZkZvd"
    },
    "attributes": {...},
    "relationships": {
      "market": {
        "links": {...}
      },
      "customer": {
        "links": {...}
      },
      "shipping_address": {
        "links": {...}
      },
      "billing_address": {
        "links": {...}
      },
      "available_payment_methods": {
        "links": {...}
      },
      "payment_method": {
        "links": {
          "self": "https://yourdomain.commercelayer.io/api/orders/qaMAhZkZvd/relationships/payment_method",
          "related": "https://yourdomain.commercelayer.io/api/orders/qaMAhZkZvd/payment_method"
        },
        "data": {
          "type": "payment_methods",
          "id": "WmOodsVPmQ"
        }
      },
      "payment_source": {
        "links": {...}
      },
      "line_items": {
        "links": {...}
      },
      "shipments": {
        "links": {...} 
      }
    },
    "meta": {
      "mode": "test"
    }
  },
  "included": [
  {
      "id": "WmOodsVPmQ",
      "type": "payment_methods",
      "links": {...},
      "attributes": {
        "payment_source_type": "stripe_payments",
        "name": "Stripe Payment",
        "disabled_at": null,
        "price_amount_cents": 0,
        "price_amount_float": 0.0,
        "formatted_price_amount": "€0,00",
        "created_at": "2018-01-01T12:00:00.000Z",
        "updated_at": "2018-01-01T12:00:00.000Z",
        "reference": "",
        "reference_origin": "",
        "metadata": {}
      },
      "relationships": {
        "market": {
        "links": {...}
        },
        "payment_gateway": {
        "links": {...}
        }
      },
      "meta": {
        "mode": "test"
      }
    }
  ]
}

2. Create the payment source and associate it with the order

The following request creates a Stripe payment object and associates it with the order identified by the "qaMAhZkZvd" ID:

curl -g -X POST \
  'http://yourdomain.commercelayer.io/api/stripe_payments' \
  -H 'Accept: application/vnd.api+json' \
  -H 'Authorization: Bearer your-access-token' \
  -H 'Content-Type: application/vnd.api+json' \
  -d '{
  "data": {
    "type": "stripe_payments",
    "attributes": {},
    "relationships": {
      "order": {
        "data": {
          "type": "orders",
          "id": "qaMAhZkZvd"
        }
      }
    }
  }
}'

On success, the API responds with a 201 Created status code, returning the created Stripe payment object:

{
  "data": {
    "id": "eqRZMSaNqM",
    "type": "stripe_payments",
    "links": {
      "self": "https://yourdomain.commercelayer.io/api/stripe_payments/eqRZMSaNqM"
    },
    "attributes": {
      "client_secret": "xxxx_secret_yyyy",
      "publishable_key": "xxxx_secret_yyyy",
      "options": {},
      "payment_instrument":{...},
      "created_at": "2018-01-01T12:00:00.000Z",
      "updated_at": "2018-01-01T12:00:00.000Z",
      "reference": null,
      "reference_origin": null,
      "metadata": {}
    },
    "relationships": {
      "order": {
        "links": {...}
      }
    },
    "meta": {
      "mode": "test"
    }
  }
}

Additional notes

Client secret generation

Asynchronous authorization

Stripe payments are asynchronous. When a Commerce Layer's stripe_payment is created and associated with an order, Stripe immediately creates a payment intent using the current order's total_amount as the amount to be authorized. Since the payment's authorization is based on a webhook, depending on your checkout implementation, two scenarios may occur:

Authorization check on order placement

Payment source nullification

If a Stripe payment is authorized but the related order is not placed yet, the associated payment source cannot be changed. Anyway, if the order is placed after the authorization is created by the Stripe webhook there is a time interval where the order status is still pending and so the order is still editable (i.e. the customer can add or remove items from the cart, changing its amount). If this happens the order amount and the succeded authorization amount may differ, resulting in an error. To prevent that scenario previously created Stripe's payment sources are nullified in case of order edit/refresh (or if the payment method associated with the order is changed) and must be recreated. In this case, if the payment has already been authorized, the related authorization is voided and the order's payment status is set back from authorized to paid.

In view of this, make sure to set the payment source as the last step of your checkout implementation.

In some special cases (e.g. to give the user the possibility to change previously inserted credit card details) you may want to force the payment source nullification, even if the order has not been edited/refreshed and/or the related payment is already authorized. To do that, you can leverage the _nullify_payment_source attribute of the order and manually trigger the payment source nullification, along with the related authorization void (if any) and payment status reset.

More to read

At the moment of the Stripe payment source creation, a PaymentIntent object is created on the server-side — see for any reference. Its client_secret is returned in the related attribute of the response and can be used in your client to securely confirm the PaymentIntent object and complete the payment workflow.

the order is placed the authorization is created

the order is placed the authorization is created

To prevent any issues in case of an attempt to place the order before the authorization is created by the Stripe webhook we introduced a control on order placement to check if the payment has been authorized. If not, we automatically and try to force the authorization. In case, for any reason (e.g. the payment intent has not been confirmed client-side), the payment can't be authorized the order placement fails.

See our documentation if you need more information on how to , , or . See our Checkout guide for more details on how to place an order.

Adding a payment source
Stripe documentation
refresh the payment source
retrieve an order
include associations
create
update a Stripe payment
Placing the order
before
after