> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getruba.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Collect a Payment Method In-App
> Let an authenticated customer save a payment method from a modal or inline frame.
export const RubaSocials = () => {
if (typeof document === "undefined") {
return null;
}
const inject = () => {
const footer = document.getElementById("footer");
if (!footer || document.getElementById("ruba-socials")) {
return false;
}
const isDark = document.querySelector("html.dark") || document.querySelector('html[class*="dark"]');
const lineColor = isDark ? "#383838" : "#e8e8ed";
const iconColor = isDark ? "#8e8e93" : "#86868b";
const markColor = isDark ? "#ffffff" : "#08080c";
const hoverColor = "#0071e3";
const div = document.createElement("div");
div.id = "ruba-socials";
div.style.cssText = `display:flex;align-items:center;gap:20px;padding-top:20px;margin-top:20px;border-top:1px solid ${lineColor};width:100%`;
const logo = `Ruba`;
const spacer = ``;
const ig = ``;
const li = ``;
const x = ``;
const github = ``;
div.innerHTML = logo + spacer + ig + li + x + github;
footer.appendChild(div);
return true;
};
if (!document.documentElement.dataset.rubaSocialsObserver) {
document.documentElement.dataset.rubaSocialsObserver = "true";
const observer = new MutationObserver(() => {
if (!document.getElementById("ruba-socials")) {
inject();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
setTimeout(() => {
if (!inject()) {
const interval = setInterval(() => {
if (inject()) {
clearInterval(interval);
}
}, 500);
setTimeout(() => clearInterval(interval), 10000);
}
}, 300);
return null;
};
The payment-method embed keeps card collection inside Ruba while your product controls where and when the UI appears.
## Getting a session token
Create a customer session on the server, where the organization access token remains private. Send only its one-hour, customer-scoped token to the browser.
```ts Server theme={"system"}
import { Ruba } from "@getruba/sdk";
const ruba = new Ruba({ accessToken: process.env.RUBA_ACCESS_TOKEN });
const { data: session, error } = await ruba.POST("/v1/customer-sessions/", {
body: { customer_id: "" },
});
if (error) throw new Error("Unable to create customer session");
```
## Build sequence
```bash theme={"system"}
pnpm add @getruba/checkout
```
### Open a modal
```ts Browser theme={"system"}
import { RubaEmbedPaymentMethod } from "@getruba/checkout/payment-method";
const embed = await RubaEmbedPaymentMethod.create({
sessionToken: session.token,
});
embed.addEventListener("success", ({ detail }) => {
console.log(detail.paymentMethodId);
});
```
### Mount inline
```ts Browser theme={"system"}
const embed = RubaEmbedPaymentMethod.createInline({
sessionToken: session.token,
element: document.getElementById("payment-method"),
});
```
React applications can render the frame directly:
```tsx React theme={"system"}
import { RubaPaymentMethod } from "@getruba/checkout/react/payment-method";
console.log(paymentMethodId)}
/>
```
### Initialize from HTML
```html theme={"system"}
```
## Localization
Pass a BCP 47 value such as `fr-FR` through `locale`. The setting applies to both embed copy and Stripe Elements. See [checkout localization](/features/checkout/localization) for supported languages.
## Events
Every signal is a cancelable `CustomEvent` on the embed instance.
| Event | Detail | Built-in reaction |
| ----------- | --------------------- | -------------------------------------------------------------------------------------------------------- |
| `loaded` | — | Removes the loading state. |
| `close` | — | Removes the frame unless confirmation has locked it. |
| `confirmed` | — | Prevents closing during processor work. |
| `success` | `{ paymentMethodId }` | Closes automatically unless `preventDefault()` is called. |
| `error` | `{ code }` | Unlocks closing after failure. Codes: `invalid_request`, `unauthorized`, `processing_failed`, `unknown`. |
## Redirect-based payment methods
Amazon Pay, Klarna, and other off-site authorization methods navigate the complete tab to the provider and back to `returnUrl`. Read the returned status once the page loads again:
```ts Browser theme={"system"}
const result = RubaEmbedPaymentMethod.getRedirectResult();
// { status: "succeeded" | "failed" } | null
```
React can use `usePaymentMethodRedirectResult`. Both routes remove the status query parameter after reading it, preventing a refresh from replaying an old result. Card 3DS stays inside the modal and does not use this return path.
## Configure behavior
| Option | Default | Effect |
| -------------- | --------------- | ----------------------------------------------------------------------- |
| `sessionToken` | Required | Authenticates the one customer allowed to save the method. |
| `theme` | `light` | Chooses `light` or `dark`. |
| `setAsDefault` | `true` | Makes the saved method the customer default when enabled. |
| `returnUrl` | Current page | Destination after an off-site authorization method returns. Modal only. |
| `locale` | `en` | BCP 47 UI locale; unsupported values fall back to English. |
| `onLoaded` | — | Callback equivalent to listening for `loaded`. |
| `element` | Required inline | Container receiving the inline frame. |
HTML triggers use the same settings through `data-ruba-payment-method-theme`, `data-ruba-payment-method-set-as-default`, `data-ruba-payment-method-return-url`, and `data-ruba-payment-method-locale`.