Primer

https://primer.io/docs
Admin
Primer is a unified payments infrastructure platform that provides SDKs, APIs, and connections to...
Tokens:800,368
Snippets:7,770
Trust Score:9.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Web SDK

Source: https://primer.io/docs/checkout/drop-in/overview

Commands to install the @primer-io/checkout-web package using yarn or npm.

```bash
# With yarn
yarn add @primer-io/checkout-web

# With npm
npm install --save @primer-io/checkout-web
```

--------------------------------

### Full Integration Example

Source: https://primer.io/docs/checkout/headless

A complete example showing how to set up the container and configure the button rendering.

```typescript
// Create your button container
const payPalButton = document.createElement('div')
const payPalButtonId = 'paypal-button'
payPalButton.setAttribute('type', 'button')
payPalButton.setAttribute('id', payPalButtonId)

function configurePayPalButton() {
	// Create the payment method manager
	const button = paymentMethodManager.createButton()

	// Render the button
	button.render(paypalButtonId, {
		style: {
			buttonColor: 'silver',
		},
	})
}
```

--------------------------------

### Install Primer SDK via npm

Source: https://primer.io/docs/checkout/primer-checkout/installation

Use npm to install the Primer SDK package.

```bash
npm install @primer-io/primer-js
```

--------------------------------

### Start Headless Universal Checkout Method

Source: https://primer.io/docs/sdk/android/v2.x.x/primer-headless-checkout/methods/start

The start function initializes the SDK with the provided context, client token, and optional settings or listeners.

```kotlin
fun start(
    context: Context,
    clientToken: String,
    settings: PrimerSettings? = null,
    checkoutListener: PrimerHeadlessUniversalCheckoutListener? = null,
    uiListener: PrimerHeadlessUniversalCheckoutUiListener? = null
)
```

--------------------------------

### showPaymentMethod usage example

Source: https://primer.io/docs/sdk/react-native/v2.x.x/primer/methods/showPaymentMethod

An example of how to call the showPaymentMethod method using the Primer instance.

```ts
import { Primer } from "@primer-io/react-native";

await Primer.showPaymentMethod(paymentMethod, intent, clientToken);
```

--------------------------------

### Install Primer SDK via yarn

Source: https://primer.io/docs/checkout/primer-checkout/installation

Use yarn to install the Primer SDK package.

```bash
yarn add @primer-io/primer-js
```

--------------------------------

### start()

Source: https://primer.io/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/start

Starts the Headless Checkout instance. Once invoked, the onAvailablePaymentMethodsLoad callback is triggered with the list of available payment methods.

```APIDOC
## start()

### Description
Starts the Headless Checkout instance. Once the instance is started, the callback `onAvailablePaymentMethodsLoad` is called with the list of payment methods.

### Signature
`start(): void`
```

--------------------------------

### Show a specific payment method example

Source: https://primer.io/docs/sdk/android/v2.x.x/primer/methods/showPaymentMethod

An example of how to call Primer.instance.showPaymentMethod within an Android Activity.

```kotlin
class CheckoutActivity : AppCompatActivity() {
  // ...
  private fun showPaymentMethod(
    clientToken: String,
    paymentMethodType: String,
    sessionIntent: PrimerSessionIntent
  ) {
    // 👇 Add this
    Primer.instance.showPaymentMethod(context, clientToken, paymentMethodType, sessionIntent)
  }
}
```

--------------------------------

### start(context, clientToken, settings, checkoutListener, uiListener)

Source: https://primer.io/docs/sdk/android/v2.x.x/primer-headless-checkout/methods/start

Initializes the Primer Headless Universal Checkout SDK with the provided context, client token, and optional configuration.

```APIDOC
## fun start(context: Context, clientToken: String, settings: PrimerSettings?, checkoutListener: PrimerHeadlessUniversalCheckoutListener?, uiListener: PrimerHeadlessUniversalCheckoutUiListener?)

### Description
Initializes the Primer Headless Universal Checkout SDK. This method must be called to start the checkout process.

### Parameters
- **context** (Context) - Required - Android Context of your Activity or Fragment.
- **clientToken** (String) - Required - A client token as returned by the create client session call.
- **settings** (PrimerSettings) - Optional - Configuration options for the SDK. If not provided, default settings are used.
- **checkoutListener** (PrimerHeadlessUniversalCheckoutListener) - Optional - Listener for checkout events.
- **uiListener** (PrimerHeadlessUniversalCheckoutUiListener) - Optional - Listener for UI-related events.
```

--------------------------------

### GET list payments example response

Source: https://primer.io/docs/manage-payments/search-payments

This JSON object represents the structure of the response returned by the GET list payments endpoint, including a list of summarized payment objects and pagination cursors.

```json
{
  "data": [
    {
      "id": "IHQlakKC",
      "date": "2021-03-24T14:56:56.869248",
      "status": "SETTLED",
      "orderId": "my-order-123",
      "currencyCode": "EUR",
      "amount": 700,
      "processor": {
        "name": "STRIPE",
        "processorMerchantId": "acct_stripe_1234"
      },
      "metadata": {
        "productId": 123,
        "merchantId": "a13bsd62s"
      }
    }
  ],
  "nextCursor": "string",
  "prevCursor": "string"
}
```

--------------------------------

### Targeted refund response details

Source: https://primer.io/docs/changelogs/migration-guides/API-2.3-to-2.4

Example response from a GET payment call showing targeted refund details.

```bash
{
  "id": "7kCpGx6Kk",
  "status": "PARTIALLY_REFUNDED",
  …
  "transactions": [
    {
      "transactionType": "REFUND",
      "amount": 1000,
      "events": [
        {
          "id": "7c136224-dd01-41fb-a5fa-cf9a5af9b704",
          "type": "CAPTURE_SUCCEEDED",
          "amount": 1000
        }
      ]
    }
  ]
}
```

--------------------------------

### start(withClientToken:settings:delegate:uiDelegate:completion:)

Source: https://primer.io/docs/sdk/ios/v2.x.x/primer-headless-checkout/methods/start

Initializes the Headless Universal Checkout session with the provided client token and configuration.

```APIDOC
## func start(withClientToken:settings:delegate:uiDelegate:completion:)

### Description
Creates a session and starts Headless Universal Checkout with its `clientToken` and custom settings. Once the session is configured on the SDK, the completion handler is invoked.

### Parameters
- **clientToken** (String) - Required - Client token as returned by the create client session call.
- **settings** (PrimerSettings) - Optional - Configuration settings for the checkout flow.
- **delegate** (PrimerHeadlessUniversalCheckoutDelegate) - Optional - Delegate for handling checkout events.
- **uiDelegate** (PrimerHeadlessUniversalCheckoutUIDelegate) - Optional - Delegate for handling UI-related events.
- **completion** (Closure) - Required - Completion handler called with payment methods or an error.

### Signature
```swift
func start(
    withClientToken clientToken: String,
    settings: PrimerSettings? = nil,
    delegate: PrimerHeadlessUniversalCheckoutDelegate? = nil,
    uiDelegate: PrimerHeadlessUniversalCheckoutUIDelegate? = nil,
    completion: @escaping (_ paymentMethods: [PrimerHeadlessUniversalCheckout.PaymentMethod]?, _ err: Error?) -> Void
)
```
```

--------------------------------

### Partial capture response details

Source: https://primer.io/docs/changelogs/migration-guides/API-2.3-to-2.4

Example response from a GET payment call showing partial capture details within the transactions.events array.

```bash
{
  "id": "7kCpGx6Kk",
  "status": "PARTIALLY_CAPTURED",
  "amount": 10000,
  …
  "transactions": [
    {
      "date": "2024-10-19T14:44:40Z",
      "amount": 10000,
      "transactionType": "SALE",
      "events": [
        {
          "id": "19de9641-f085-48a8-8278-7945fb78c7aa",
          "type": "AUTHORIZATION_SUCCEEDED",
          "amount": 10000
        },
        {
          "id": "c0b4946e-b3e1-4664-b563-db13491ad35b",
          "type": "CAPTURE_SUCCEEDED",
          "amount": 1234,
          "final": false
        }
      ]
    }
  ]
}
```

--------------------------------

### Retrieve payment details via Payments API response

Source: https://primer.io/docs/manage-payments/search-payments

Example JSON response returned by the GET /payments/<PAYMENT_ID> endpoint, containing the full payment object including status, customer information, and transaction history.

```json
{
  "id": "kHdEw9EG",
  "date": "2021-02-21T15:36:16.367687",
  "status": "AUTHORIZED",
  "orderId": "order-abc",
  "customerId": "customer-123",
  "currencyCode": "EUR",
  "amount": 42,
  "paymentMethod": {
    "paymentMethodToken": "heNwnqaeRiqvY1UcslfQc3wxNjEzOTIxNjc4",
    "isVaulted": true,
    "descriptor": "Purchase: Socks",
    "analyticsId": "VtkMDAxZW5isH0HsbbNxZ3lo",
    "paymentMethodType": "PAYMENT_CARD",
    "paymentMethodData": {
      "first6Digits": "411111",
      "last4Digits": "1111",
      "expirationMonth": "12",
      "expirationYear": "2030",
      "cardholderName": "John Biggins",
      "network": "Visa",
      "isNetworkTokenized": false,
      "binData": {
        "network": "VISA",
        "regionalRestriction": "UNKNOWN",
        "accountNumberType": "UNKNOWN",
        "accountFundingType": "UNKNOWN",
        "prepaidReloadableIndicator": "NOT_APPLICABLE",
        "productUsageType": "UNKNOWN",
        "productCode": "VISA",
        "productName": "VISA"
      }
    }
  },
  "processor": {
    "name": "STRIPE",
    "processor_merchant_id": "acct_stripe_1234",
    "amountCaptured": 0,
    "amountRefunded": 0
  },
  "transactions": [
    {
      "type": "SALE",
      "processorStatus": "AUTHORIZED",
      "processorName": "STRIPE",
      "processorMerchantId": "acct_stripe_1234",
      "processorTransactionId": "54c4eb5b3ef8a",
      "authorizationCode": "831000"
    }
  ],
  "customer": {
    "email": "customer123@gmail.com"
  },
  "metadata": {
    "productId": 123,
    "merchantId": "a13bsd62s"
  }
}
```

--------------------------------

### Initialize SDK (Android)

Source: https://primer.io/docs/connections/payment-methods/klarna/dropin

Configure the Primer SDK with Klarna options and the return intent URL.

```kotlin
val klarnaOptions = PrimerKlarnaOptions(
    // Optional description for recurring payments recurringPaymentDescription = "This is custom description",
    // Built from the deeplink activity's intent filter scheme and host. 
    // This will be used by third-party apps to link back to your app.
    returnIntentUrl = "app://deeplink.return.activity"
)
val settings = PrimerSettings(
    paymentMethodOptions = PrimerPaymentMethodOptions(klarnaOptions = klarnaOptions)
)
Primer.instance.configure(settings, listener)
```

--------------------------------

### Handle Raw Data Payment Method Submission

Source: https://primer.io/docs/changelogs/migration-guides/headless-mobile-out-of-beta

This example demonstrates the setup for handling payment methods that require raw data submission, such as card payments. It involves rendering custom input elements and capturing data before submitting it to the SDK.

```swift
import UIKit
import PrimerSDK
class ViewController: UIViewController {
    // ...

```

--------------------------------

### Implementing primerWillCreatePaymentWithData

Source: https://primer.io/docs/sdk/ios/v2.x.x/primer/delegates/PrimerDelegate

Basic implementation example showing how to conform to the PrimerDelegate protocol and implement the payment creation hook.

```swift
// 👇 Add this
import PrimerSDK

// 👇 Conform to PrimerDelegate
class MyViewController: UIViewController, PrimerDelegate {

	// ...

    // 👇 Add this
	func primerWillCreatePaymentWithData(_ data: PrimerCheckoutPaymentMethodData, decisionHandler: @escaping (PrimerPaymentCreationDecision) -> Void)

    }
}
```

--------------------------------

### configure(settings:delegate:)

Source: https://primer.io/docs/sdk/ios/v2.x.x/primer/methods/configure

Initializes the Primer SDK with optional settings and a delegate to handle payment events.

```APIDOC
## func configure(settings: PrimerSettings? = nil, delegate: PrimerDelegate? = nil)

### Description
Initializes the Universal Checkout flow. This method should be called to set up the SDK with specific configurations and a delegate to handle callbacks.

### Parameters
- **settings** (PrimerSettings) - Optional - Configuration object for the SDK, including payment handling, locale, and payment method options.
- **delegate** (PrimerDelegate) - Optional - Delegate object to handle SDK events.

### PrimerSettings Properties
- **paymentHandling** (enum PrimerPaymentHandling) - Optional - Defines the payment flow. Options: `.auto` (default, SDK handles payment) or `.manual` (requires manual handling via `primerDidTokenizePaymentMethod`).
- **localeData** (PrimerLocaleData) - Optional - Configuration for locale settings.
  - **languageCode** (String) - Required - The language code (e.g., 'en').
  - **regionCode** (String) - Optional - The region code (e.g., 'US').
- **paymentMethodOptions** (PrimerPaymentMethodOptions) - Optional - Configuration for specific payment methods.
  - **urlScheme** (String) - Optional - Required for some methods like PayPal; sets the deeplink schema.
  - **applePayOptions** (PrimerApplePayOptions) - Optional - Required for Apple Pay integration.
    - **merchantIdentifier** (String) - Required - The merchant identifier from the Apple Pay certificate.
    - **isCaptureBillingAddressEnabled** (Bool) - Optional - Whether to capture the billing address.
    - **showApplePayForUnsupportedDevice** (Bool) - Optional - Whether to show Apple Pay on unsupported devices (default: true).
    - **checkProvidedNetworks** (Bool) - Optional - Whether to check for cards in the Wallet (default: true).
```

--------------------------------

### Install Gemfile dependencies

Source: https://primer.io/docs/payment-services/3d-secure/get-started

Run bundle install to install the newly added cocoapods-pod-linkage gem.

```shell
bundle install
Fetching gem metadata from https://rubygems.org/.......
Resolving dependencies...
Fetching cocoapods-pod-linkage 0.0.1
Installing cocoapods-pod-linkage 0.0.1
Bundle complete! 3 Gemfile dependencies, 40 gems now installed.
Bundled gems are installed into `./vendor/bundle`
```

--------------------------------

### Start payment flow

Source: https://primer.io/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/createVaultManager

Initializes the vault manager to start a payment flow.

```ts
// Initialise Headless Checkout ...

const vaultManager = headless.createVaultManager();
```

--------------------------------

### Start the component flow

Source: https://primer.io/docs/connections/payment-methods/nol-pay/headless

Call the start function to initiate the component flow.

```swift
    nolPayLinkComponent.start()
```

--------------------------------

### Configure Primer SDK with PrimerSettings

Source: https://primer.io/docs/sdk/ios/v2.x.x/primer/methods/configure

This example demonstrates how to import the PrimerSDK and initialize the PrimerSettings object with various payment handling, locale, and UI options within a UIViewController.

```swift
// 👇 Add this
import PrimerSDK

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 👇 Create your settings
        let settings = PrimerSettings(
            paymentHandling: .auto,
            localeData: PrimerLocaleData(
                languageCode: "en",
                regionCode: "US"),
            paymentMethodOptions: PrimerPaymentMethodOptions(
                urlScheme: "URL_SCHEME://",
                applePayOptions: PrimerApplePayOptions(
                    merchantIdentifier: "MERCHANT_IDENTIFIER",
                    merchantName: "MERCHANT_NAME",
                    isCaptureBillingAddressEnabled: true,
                    showApplePayForUnsupportedDevice: true,
                    checkProvidedNetworks: true,
                    shippingOptions: PrimerApplePayOptions.ShippingOptions(
                        shippingContactFields: [.name, .emailAddress],
                        requireShippingMethod: true
                    ),
                    billingOptions: PrimerApplePayOptions.BillingOptions(
                        requiredBillingContactFields: [.postalAddress]
                    )
                ),
                klarnaOptions: PrimerKlarnaOptions(
                    recurringPaymentDescription: "RECURRING_PAYMENT_DESCRIPTION"),
                stripeOptions: PrimerStripeOptions(
                    publishableKey: "STRIPE_PUBLISHABLE_KEY")),
            uiOptions: PrimerUIOptions(
                isInitScreenEnabled: true,
                isSuccessScreenEnabled: true,
                isErrorScreenEnabled: true,
                cardFormUIOptions: PrimerCardFormUIOptions(
                    payButtonAddNewCard: true
                )
            ),
            debugOptions: PrimerDebugOptions(is3DSSanityCheckEnabled: false))
    }
}
```

--------------------------------

### Web SDK initialization monitoring

Source: https://primer.io/docs/checkout/primer-checkout/configuration/best-practices

Listen for the primer:ready event to confirm SDK initialization and log active payment methods.

```javascript
checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;
  console.log('SDK initialized');
  console.log('Applied locale:', checkout.options?.locale);
  console.log('Active payment methods:', primer.getPaymentMethods?.());
});
```

--------------------------------

### Start the component flow

Source: https://primer.io/docs/connections/payment-methods/nol-pay/headless

Call the start function to initiate the unlinking component flow.

```kotlin
        
        nolPayUnlinkComponent.start()
```

--------------------------------

### Configure Primer SDK with PrimerSettings

Source: https://primer.io/docs/sdk/android/v2.x.x/primer/methods/configure

This example demonstrates how to define a PrimerCheckoutListener and configure the SDK using the PrimerSettings object, including payment handling, UI options, and specific payment method settings.

```kotlin
val listener = object : PrimerCheckoutListener {
  override fun onCheckoutCompleted(checkoutData: PrimerCheckoutData) {

  }
}

val settings = PrimerSettings(
  paymentHandling = PrimerPaymentHandling.AUTO,
  paymentMethodOptions = PrimerPaymentMethodOptions(
    redirectScheme = "deeplink_scheme",
    klarnaOptions = PrimerKlarnaOptions("RECURRING_PAYMENT_DESCRIPTION"),
    googlePayOptions = PrimerGooglePayOptions(captureBillingAddress = true),
  ),
  uiOptions = PrimerUIOptions(
    isInitScreenEnabled = true,
    isSuccessScreenEnabled = true,
    isErrorScreenEnabled = true,
  ),
  cardFormUIOptions = PrimerCardFormUIOptions(
    payButtonAddNewCard = true,
  ),
  debugOptions = PrimerDebugOptions(is3DSSanityCheckEnabled = false),
  threeDsOptions = PrimerThreeDsOptions("APP_LINK")
)

Primer.instance.configure(settings, listener)
```

--------------------------------

### Start the payment component flow

Source: https://primer.io/docs/connections/payment-methods/nol-pay/headless

Initiate the payment flow by calling the start function.

```swift
        nolPayPaymentComponent.start()
```

--------------------------------

### Full Headless Checkout Configuration Example

Source: https://primer.io/docs/checkout/headless

A complete example showing how to fetch a client session and initialize the checkout flow on page load.

```typescript
window.addEventListener('load', onLoaded)

async function onLoaded() {
	// Create a client session via your backend
	const clientSession = await fetch('/client-session', {
		method: 'post',
		headers: { 'Content-Type': 'application/json' },
	}).then(data => data.json())
```

--------------------------------

### Start the Klarna component flow

Source: https://primer.io/docs/connections/payment-methods/klarna/headless?platform=ios

Call the start method to initiate the Klarna session.

```swift
klarnaComponent.start()
```

--------------------------------

### showVaultManager implementation

Source: https://primer.io/docs/sdk/react-native/v2.x.x/primer/methods/showVaultManager

Example of how to invoke the showVaultManager method using the Primer instance.

```ts
import { Primer } from "@primer-io/react-native";

Primer.showVaultManager(clientToken);
```

--------------------------------

### Install Primer SDK via pnpm

Source: https://primer.io/docs/checkout/primer-checkout/installation

Use pnpm to install the Primer SDK package.

```bash
pnpm add @primer-io/primer-js
```

--------------------------------

### Show Vault Manager Example

Source: https://primer.io/docs/sdk/web/v2.x.x/primer/methods/showVaultManager

Demonstrates how to initialize the Vault Manager using a client token and a container element.

```ts
import { Primer } from "@primer-io/checkout-web";

const clientToken = "YOUR_CLIENT_TOKEN";

async function showVaultManager() {
  const primerVaultManager = await Primer.showVaultManager(clientToken, {
    container: "#my-element",
    // other options...
  });
}
```

--------------------------------

### Complete Apple Pay implementation example

Source: https://primer.io/docs/sdk/primer-checkout-web/apple-pay

A full example showing the primer-checkout element and the JavaScript initialization required to configure Apple Pay button, billing, and shipping options.

```html
<primer-checkout client-token="your-client-token"></primer-checkout>

<script type="module">
  import { loadPrimer } from '@primer-io/primer-js';

  loadPrimer();

  const checkout = document.querySelector('primer-checkout');
  checkout.options = {
    applePay: {
      buttonOptions: {
        type: 'buy',
        buttonStyle: 'black',
      },
      billingOptions: {
        requiredBillingContactFields: ['postalAddress'],
      },
      shippingOptions: {
        requiredShippingContactFields: ['postalAddress', 'name', 'email', 'phone'],
      },
    },
  };
</script>
```

--------------------------------

### Primer.createHeadless(clientToken, options)

Source: https://primer.io/docs/sdk/web/v2.x.x/primer/methods/createHeadless

Initializes the Primer headless SDK with a client token and configuration options.

```APIDOC
## Primer.createHeadless(clientToken, options)

### Description
Initializes the Primer SDK in headless mode. This method accepts a client token and an options object containing event callbacks and payment method configurations.

### Parameters
- **clientToken** (string) - Required - The client token used to authenticate the SDK session.
- **options** (object) - Required - Configuration object containing callbacks and payment method settings.

### Event Callbacks
- **onCheckoutComplete** (function) - Optional - Triggered when the checkout process is successfully completed.
- **onCheckoutFail** (function) - Optional - Triggered when the checkout process fails. Provides an error, data, and a handler object.
- **onPaymentMethodAction** (function) - Optional - Triggered when a payment method is selected or unselected.

### Payment Method Options
- **redirect** (object) - Optional - Configuration for redirect-based payment methods (returnUrl, forceRedirect).
- **googlePay** (object) - Optional - Configuration for Google Pay (captureBillingAddress).
- **applePay** (object) - Optional - Configuration for Apple Pay (billingOptions, shippingOptions).
```

--------------------------------

### Start Unlink Component Flow

Source: https://primer.io/docs/connections/payment-methods/nol-pay/headless

Call the start function to initiate the unlinking component flow.

```swift
        nolPayUnlinkComponent.start()
```

--------------------------------

### Complete Adyen Klarna integration example

Source: https://primer.io/docs/sdk/primer-checkout-web/adyen-klarna

This example demonstrates how to initialize the primer-checkout element and configure the adyenKlarna options, including the required redirect return URL.

```html
<primer-checkout client-token="your-client-token"></primer-checkout>

<script type="module">
  import { loadPrimer } from '@primer-io/primer-js';

  loadPrimer();

  const checkout = document.querySelector('primer-checkout');
  checkout.options = {
    // Redirect configuration (applies to all redirect payment methods)
    redirect: {
      returnUrl: 'https://your-site.com/checkout/complete',
    },

    // Klarna via Adyen configuration
    adyenKlarna: {
      buttonOptions: {
        text: 'Pay with Klarna',
      },
    },
  };
</script>
```

--------------------------------

### Load Primer in SvelteKit with onMount

Source: https://primer.io/docs/checkout/primer-checkout/troubleshooting

Uses the onMount lifecycle hook and the browser environment check to initialize the SDK.

```javascript
<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  onMount(async () => {
    if (browser) {
      const { loadPrimer } = await import('@primer-io/primer-js');
      loadPrimer();
    }
  });
</script>
```

--------------------------------

### Start the Stripe ACH component flow

Source: https://primer.io/docs/connections/payment-methods/ach/stripe-headless

Initiate the component flow by calling the start function.

```javascript
stripeAchUserDetailsComponent.start()
```

--------------------------------

### Configure VaultManager example

Source: https://primer.io/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/configure

An example demonstrating how to instantiate and configure the VaultManager within an asynchronous function.

```typescript
import { VaultManager } from "@primer-io/react-native";

async function configureVaultManager() {
  try {
    let vaultManager = new VaultManager();
    await vaultManager.configure();
    console.log("Vault Manager configured successfully");
  } catch (error) {
    console.error("Error configuring Vault Manager:", error);
  }
}
```

--------------------------------

### Initialize and configure Google Pay in Primer Checkout

Source: https://primer.io/docs/sdk/primer-checkout-web/google-pay

This example demonstrates how to load the Primer SDK, initialize the primer-checkout element, and apply Google Pay configuration options such as button styling and address collection requirements.

```html
<primer-checkout client-token="your-client-token"></primer-checkout>

<script type="module">
  import { loadPrimer } from '@primer-io/primer-js';

  loadPrimer();

  const checkout = document.querySelector('primer-checkout');
  checkout.options = {
    googlePay: {
      // Styling
      buttonType: 'checkout',
      buttonColor: 'black',
      buttonSizeMode: 'fill',
      buttonRadius: 4,

      // Express checkout
      captureBillingAddress: true,
      captureShippingAddress: true,
      shippingAddressParameters: {
        allowedCountryCodes: ['US', 'CA', 'GB', 'DE', 'FR'],
        phoneNumberRequired: true,
      },
      requireShippingMethod: true,
      emailRequired: true,

      // Advanced
      existingPaymentMethodRequired: false,
    },
  };
</script>
```

--------------------------------

### klarnaComponent.start()

Source: https://primer.io/docs/connections/payment-methods/klarna/headless?platform=ios

Initiates the Klarna component flow.

```APIDOC
### klarnaComponent.start()

### Description
Call the start method to begin the Klarna component flow. This triggers the creation of the Klarna session and emits the paymentSessionCreated step.
```

--------------------------------

### TxnTag Usage Examples

Source: https://primer.io/docs/concepts/decline-codes/timeouts

Examples of using the TxnTag component to display various transaction statuses.

```jsx
<TxnTag status="PENDING" />
```

```jsx
<TxnTag status="AUTHORIZED" />
```

```jsx
<TxnTag status="SETTLED" />
```

```jsx
<TxnTag status="FAILED" />
```

--------------------------------

### Initialize Primer SDK

Source: https://primer.io/docs/connections/payment-methods/ach/stripe-dropin

Apply the configured settings to the Primer SDK.

```javascript
await Primer.configure(settings);
```

--------------------------------

### Web Installation Commands

Source: https://primer.io/docs/changelogs/migration-guides/migrate-to-primer-checkout

Commands to remove the legacy @primer-io/checkout-web package and install the new @primer-io/primer-js package.

```bash
# Remove legacy package
npm uninstall @primer-io/checkout-web

# Install new package
npm install @primer-io/primer-js
```

--------------------------------

### Initialize Primer.createHeadless with event callbacks

Source: https://primer.io/docs/sdk/web/v2.x.x/primer/methods/createHeadless

Initializes the headless SDK with a client token and defines callbacks for checkout completion and failure handling.

```javascript
Primer.createHeadless(clientToken, {
  onCheckoutComplete(...args) {
    console.log("onCheckoutComplete", ...args);
  },
  onCheckoutFail(error, data, handler) {
    if (!handler) {
      return;
    }

    // Tells the SDK that it can proceed
    // Note: this does not show any error message
    return handler.showErrorMessage();
  },
});
```
Tokens:
Raw