# Limio Stripe Payments Integration

{% hint style="info" %}
This guide covers using **Stripe for payment tokenization with Zuora for billing**. If you want to use **Stripe as your billing provider** (without Zuora), see the [Stripe Billing Integration](/integrations/stripe-billing-integration/stripe-billing.md) instead.
{% endhint %}

Limio supports using Stripe for collecting payments via credit card while using Zuora for subscription billing. The integration uses [Stripe Payment Elements](https://stripe.com/docs/elements) to vault the payment and [Zuora Credit Card Reference Payments](https://knowledgecenter.zuora.com/Zuora_Payments/Process_payments/Payment_Pages_2.0/AC_Configure_Payment_Pages_2.0/Configure_Credit_Card_Reference_Payment_Pages_2.0_for_Stripe_v2) to store these as Payment Methods in Zuora. This tokenises the card directly in Stripe, and shares the token to Zuora.

<figure><img src="/files/GuvGAzvwdzUgm0acCGID" alt=""><figcaption></figcaption></figure>

Please note that this is a different approach from the standard Zuora approach of using a Zuora Hosted Payment Method or Payment Form. You can learn more about it [here](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/how-to-set-up-zuora-hosted-payment-methods-for-limio).

## **Prerequisites**

* You will need a Stripe account.
* You will need to activate Credit Card Reference Transaction payment method in Zuora for your Stripe v2 gateway.

## **Setting it up**

1. **Stripe Dashboard:**
   * Go to <https://dashboard.stripe.com>
   * In the left-hand menu, click on **Developers** → **API keys** to get a secret key
2. **Test access:**
   * Make sure to switch to “Test Mode” using the toggle on the left in the dashboard.
3. **API keys:**
   * Stored in Integrations tab under “Stripe”
   * Name doesn’t actually matter it always overwrites it with Stripe at the moment.
4. **Zuora configuration:**
   * In Zuora, you will need to create a Stripe payment gateway using this [documentation](https://docs.zuora.com/en/zuora-payments/manage-payment-gateway-integrations-and-payment-methods/set-up-payment-gateway-integrations/stripe-payment-gateway/set-up-and-configure-a-stripe-payment-gateway-instance/configuration-fields).
   * In Limio, go to Developer > Settings at `https://<tenant>.limio.com/developer/settings` to configure the gateway.<br>

     <figure><img src="/files/saGgGW0jgJnwrtpG4xPP" alt=""><figcaption></figcaption></figure>
   * Publishable Key can be retrieved in the same place as Secret Key above in Stripe
   * Zuora Payment Gateway ID can be retrieved from the Zuora Settings page for the Stripe payment gateway you created in Zuora earlier. This is in Zuora > Settings > Payments > Manage Payment Gateway. It will be visible in the URL bar *gatewayId=XXX*<br>

     <figure><img src="/files/YaWBY6nGtbkL2W6Z1crm" alt=""><figcaption></figcaption></figure>
   * Hit Save at the top of the page. Changes to your gateway will be immediate.

{% hint style="danger" %}
Make sure you use the **Zuora Payment Gateway ID** from the Gateway Settings. Do not copy the Page ID of a Zuora Hosted Payment Method Page. This feature does not rely on Zuora Hosted Payment Method Pages, which tokenises the card in Zuora ([learn more about Zuora HPM pages here](/integrations/zuora-integration/configuring-payment-gateways/how-to-set-up-zuora-hosted-payment-methods-for-limio.md)).
{% endhint %}

## **How it works**

### **Limio Page Builder configuration:**

* On the Limio Shop & Self-Service, a Limio Component renders the Stripe Payment Element.
  * The Checkout Form > Payment Manager Field subcomponent will render Stripe for any offers that have Stripe as one of their payment methods.
  * The Self-service Form > Payment Manager Field subcomponent will render Stripe if it is added as an option in a default Field subcomponent, or in the Self-service Form's payment method type prop.<br>

    <figure><img src="/files/UKdBzadQnf1fELUhE3u8" alt=""><figcaption></figcaption></figure>

### **Back-End Processing:**

When using Stripe’s Payment Element with Limio, the payment flow proceeds as follows:

1. **PaymentIntent** **creation**\
   On page load, Limio creates or retrieves a one-time Stripe PaymentIntent via the Limio backend. This intent is tied to the current Limio basket.
2. **Rendering** **the** **Payment** **Element**\
   Once the PaymentIntent is ready, the Stripe Payment Element (iFrame) is rendered on the Limio Form or Limio Self-Service Form, allowing the customer to enter their payment details securely.
3. **Submitting** **the** **payment**\
   When the customer submits the Limio Order:
   * Stripe collects and confirms the payment details.
   * A Stripe token is generated and passed back to Limio.
4. **Zuora** **Payment** **Method** **creation**\
   Limio then uses the token to:
   * Create a **Stripe** **Customer** (if not already created).
   * Limio creates a corresponding **Zuora** **Payment** **Method** using Stripe’s token (for use in Referenced Transactions).
5. **Processing** **the** **payment**\
   If a payment is required:
   * Limio creates a **Credit** **Card** **Referenced** **Payment** in Zuora.
   * This payment is linked to the card saved via Stripe’s Payment Element and associated with the Stripe Customer.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/limio-stripe-payments-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.