Stripe SDK (Payment Flow)

The following assumes you're attempting to capture and use a payment detail during a basket session, rather than simply adding 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 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 re-use 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:

{
  "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
}

Note: store_on_payment and store_on_payment_auto_payment flags are also passed here. This tells Upmind about your intent to save and re-use payment methods for automated renewal payments.

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 again 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. This is where Upmind will redirect to in case another off-site authentication flow is engaged.

{
    "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}"
}

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.