> ## Documentation Index
> Fetch the complete documentation index at: https://docs.upmind.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe SDK (Payment Flow)

> If you're building your own frontend and trying to implement a basic order payment flow using the Stripe SDK, this guide will walk you through the main steps. It's not a complete guide, but instead intended to point you in the right direction.

The following assumes you're attempting to capture and use a payment detail during a basket session, rather than simply adding it for later use. There is a separate flow for adding details, which relies on creating a `clientSecret` and using a `setupIntent`.

## Step 1

Make sure the Stripe SDK is loaded within your application or site.

## Step 2

Create and mount the Stripe payment element `this.stripe.elements({ mode: "payment", ... })` within your app. See [<u>https://stripe.com/docs/payments/finalize-payments-on-the-server?platform=web\&type=payment#additional-options</u>](https://stripe.com/docs/payments/finalize-payments-on-the-server?platform=web\&type=payment#additional-options) for more flow details and options. Note that you'll want to pass `setupFutureUsage: "off_session"` if you plan to save and reuse the payment details.

## Step 3

Create a Stripe payment method `this.stripe.createPaymentMethod({ elements: this.elements })`. This should return a `paymentMethod` object containing an `id` property. You'll need to pass this ID to Upmind in a later step. Beware, you'll need to test different card types – some may take you off-site for authentication, and you'll need to handle the return flow back to your application.

## **Step 4**

When you convert a basket to an order (POST to `https://api.upmind.io/api/orders/{id}/convert`) you'll need to include `gateway_id` (ID of your Stripe gateway in Upmind) plus an object called `payment_method_addition` which should contain two additional properties: `payment_method_id` (the ID of the payment method created in step 3) and `payment_method_type` (likely `card`). Example payload:

`JSON` Example

<CodeGroup>
  ```json JSON theme={null}
  {
    "store_on_payment": true,
    "store_on_payment_auto_payment": true,
    "gateway_id": "78985742-6489-7012-50be-1e325d0ed369",
    "payment_method_addition": {
      "payment_method_type": "card",
      "payment_method_id": "pm_1Niu53BiaNfu64y0LG7VuD12"
    },
    "amount": 2
  }
  ```
</CodeGroup>

<Note>
  `store_on_payment` and `store_on_payment_auto_payment` flags are also passed here. This tells Upmind about your intent to save and reuse payment methods for automated renewal payments.
</Note>

## **Step 5**

Once your order has been converted successfully, you'll want to attempt to capture payment (POST to `https://api.upmind.io/api/payments`). Below is an example payload, showing how to pass the `payment_method_id`. Note that you need to add your site's destination URL (typically an order complete page) to the `return_url` and `cancel_url` properties. Upmind will redirect to this in case another off-site authentication flow is engaged.

`JSON` Example

<CodeGroup>
  ```json JSON theme={null}
  {
      "store_on_payment": true,
      "store_on_payment_auto_payment": true,
      "gateway_id": "78985742-6489-7012-50be-1e325d0ed369",
      "payment_method_addition": {
          "payment_method_type": "card",
          "payment_method_id": "pm_1Niu53BiaNfu64y0LG7VuD12"
      },
      "amount": 2,
      "client_id": "0e435795-e78d-184e-248b-e1643202d986",
      "account_id": "d7382485-0793-153d-747a-91e642d59e06",
      "invoice_id": "e78642de-5397-1478-d673-be1208469530",
      "return_url": "?success={URL}",
      "cancel_url": "{URL}"
  }
  ```
</CodeGroup>

All being well, you should have successfully created a Stripe payment method and used that detail to pay for an Upmind order. These steps do NOT cover edge cases, error handling, etc., but instead are intended to guide you in the right direction when working on your own implementation.