# Manage payment sources

> For the complete machine-readable documentation index, see [llms.txt](https://apidocs.chargebee.com/llms.txt).


[Idempotency Supported](/docs/api/idempotency)

This API generates a hosted page URL to add new or update existing payment sources for the customer.

Use one of the following methods to open the hosted page:

-   **In-app modal**: Use Chargebee.js [`openCheckout()`](https://www.chargebee.com/checkout-portal-docs/cbinstanceobj-api-ref.html#opencheckout-options) to open the hosted page in a modal popup in your website or application.
-   **Standalone page**: Redirect the customer to the hosted page `url`.

Do not embed the hosted page in your own [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe).

## Sample Request

#### cURL

```bash
curl  https://{site}.chargebee.com/api/v2/hosted_pages/manage_payment_sources \
     -u {site_api_key}:\
     -d "customer[id]"="__test__KyVnHhSBWmJIX2uE" \
     -d "card[gateway_account_id]"="gw___test__KyVnGlSBWmAIk2Ph"
```

#### .NET

```dotnet
using ChargeBee.Api;
using ChargeBee.Models;

ApiConfig.Configure("{site}","{site_api_key}");
EntityResult result = HostedPage.ManagePaymentSources()
		.CustomerId("__test__KyVnHhSBWmJIX2uE")
		.CardGatewayAccountId("gw___test__KyVnGlSBWmAIk2Ph")
		.Request();

HostedPage hostedPage = result.HostedPage;
```

#### Go

```go
package main
import (
    "fmt"
    "github.com/chargebee/chargebee-go/v3"
    hostedpageAction "github.com/chargebee/chargebee-go/v3/actions/hostedpage"
    "github.com/chargebee/chargebee-go/v3/models/hostedpage"
)
func main() {
    chargebee.Configure("{site_api_key}","{site}");
    res,err := hostedpageAction.ManagePaymentSources(&hostedpage.ManagePaymentSourcesRequestParams{
        Customer : &hostedpage.ManagePaymentSourcesCustomerParams{
            Id : "__test__KyVnHhSBWmJIX2uE",
        },
        Card : &hostedpage.ManagePaymentSourcesCardParams{
            GatewayAccountId : "gw___test__KyVnGlSBWmAIk2Ph",
        },
    }).Request()
    if err != nil {
        fmt.Println(err)
    } else {
        HostedPage := res.HostedPage
    }
}
```

#### Go

```go
package main

import (
  "fmt"
  "github.com/chargebee/chargebee-go/v4"
)

func main() {
  config := &chargebee.ClientConfig{
    SiteName: "{site}",
    ApiKey: "{site_api_key}",
  }    
  client := chargebee.NewClient(config)
  req := &chargebee.HostedPageManagePaymentSourcesRequest{
    Customer : &chargebee.HostedPageManagePaymentSourcesCustomer{
        Id : "__test__KyVnHhSBWmJIX2uE",
    },
    Card : &chargebee.HostedPageManagePaymentSourcesCard{
        GatewayAccountId : "gw___test__KyVnGlSBWmAIk2Ph",
    },
}
  res, err := client.HostedPage.ManagePaymentSources(req)
      if err != nil {
        fmt.Println(err)
    } else {
        HostedPage := res.HostedPage
    }
}
```

#### Java

```java
import com.chargebee.*;
import com.chargebee.ListResult;
import com.chargebee.models.*;
import com.chargebee.models.enums.*;
import java.io.IOException;

public class Sample {

    public static void main(String args[]) throws IOException, Exception {
        Environment.configure("{site}", "{site_api_key}");
        Result result = HostedPage.managePaymentSources()
            .customerId("__test__KyVnHhSBWmJIX2uE")
            .cardGatewayAccountId("gw___test__KyVnGlSBWmAIk2Ph")
            .request();

        HostedPage hostedPage = result.hostedPage();
    }
}
```

#### Java

```java
import com.chargebee.v4.client.ChargebeeClient;
import com.chargebee.v4.models.hostedPage.HostedPage;
import com.chargebee.v4.models.hostedPage.params.HostedPageManagePaymentSourcesParams;
import com.chargebee.v4.models.hostedPage.responses.HostedPageManagePaymentSourcesResponse;

public class HostedPageManagePaymentSources {

    public static void main(String[] args) {
        ChargebeeClient client = ChargebeeClient.builder()
            .apiKey("{site_api_key}")
            .siteName("{site}")
            .build();

        HostedPageManagePaymentSourcesParams.CustomerParams customerParams =
            HostedPageManagePaymentSourcesParams.CustomerParams.builder()
                .id("__test__KyVnHhSBWmJIX2uE")
                .build();

        HostedPageManagePaymentSourcesParams.CardParams cardParams =
            HostedPageManagePaymentSourcesParams.CardParams.builder()
                .gatewayAccountId("gw___test__KyVnGlSBWmAIk2Ph")
                .build();

        HostedPageManagePaymentSourcesParams params = HostedPageManagePaymentSourcesParams.builder()
            .customer(customerParams)
            .card(cardParams)
            .build();

        HostedPageManagePaymentSourcesResponse response = client.hostedPages().managePaymentSources(params);

        HostedPage hostedPage = response.getHostedPage();
    }
}
```

#### Node.js

```node
import Chargebee from "chargebee";

const chargebee = new Chargebee({
    site: "{site}",
    apiKey: "{site_api_key}",
});

try {
    const result = await chargebee.hostedPage.managePaymentSources({
        customer: {
            id: "__test__KyVnHhSBWmJIX2uE"
        },
        card: {
            gateway_account_id: "gw___test__KyVnGlSBWmAIk2Ph"
        }
    });

    console.log(result);
    const hostedPage = result.hosted_page;
} catch (err) {
    console.log(err);
}
```

#### PHP

```php
<?php

require __DIR__ . '/vendor/autoload.php';

use Chargebee\ChargebeeClient;

$chargebee = new ChargebeeClient(options: [
    "site" => "{site}",
    "apiKey" => "{site_api_key}",
]);
$result = $chargebee->hostedPage()->managePaymentSources([
    "customer" => [
        "id" => "__test__KyVnHhSBWmJIX2uE"
    ],
    "card" => [
        "gateway_account_id" => "gw___test__KyVnGlSBWmAIk2Ph"
    ]
]);
$hostedPage = $result->hosted_page;
```

#### Python

```python
from chargebee import Chargebee

cb_client = Chargebee(api_key="{site_api_key}", site="{site}")
response = cb_client.HostedPage.manage_payment_sources(
    cb_client.HostedPage.ManagePaymentSourcesParams(
        customer=cb_client.HostedPage.ManagePaymentSourcesCustomerParams(
            id="__test__KyVnHhSBWmJIX2uE"
        ),
        card=cb_client.HostedPage.ManagePaymentSourcesCardParams(
            gateway_account_id="gw___test__KyVnGlSBWmAIk2Ph"
        )
    )
)
hosted_page = response.hosted_page
```

#### Ruby

```ruby
require 'chargebee'

ChargeBee.configure(:site => "{site}",
  :api_key => "{site_api_key}")

result = ChargeBee::HostedPage.manage_payment_sources({
  :customer => {
    :id => "__test__KyVnHhSBWmJIX2uE"
  },
  :card => {
    :gateway_account_id => "gw___test__KyVnGlSBWmAIk2Ph"
  }
})

hosted_page = result.hosted_page
```

## Sample Response

```json
{
  "hosted_page": {
    "created_at": 1517506015,
    "embed": false,
    "expires_at": 1517592415,
    "id": "__test__LycuLPCkhW3axOiXjHWkOOVl3ZE3yLLni",
    "layout": "in_app",
    "object": "hosted_page",
    "resource_version": 1517506015000,
    "state": "created",
    "type": "manage_payment_sources",
    "updated_at": 1517506015,
    "url": "https://yourapp.chargebee.com/pages/v3/__test__LycuLPCkhW3axOiXjHWkOOVl3ZE3yLLni/"
  }
}
```

## URL Format

**POST** https://[site].chargebee.com/api/v2/hosted_pages/manage_payment_sources

## Input Parameters

- `business_entity_id` (optional, string, max chars=50)
  The unique ID of the [business entity](/docs/api/business_entities) of this hosted page. This is always the same as the business entity of the customer.

- `brand_id` (optional, string, max chars=50)
  The unique ID of the [brand](/docs/api/brands) this hosted page should be linked to. Applicable only when multiple brands have been created for the site. This need not match the brand of the customer or subscription in the request; when the two differ, the value provided here is used for the hosted page. An alternative way of passing this parameter is by means of the `chargebee-brand-id` custom HTTP header; when both are provided, they must specify the same brand.
  
  **Default behavior**
  
  -   When not provided, the hosted page is linked to the brand of the customer or subscription in the request.

- `redirect_url` (optional, string, max chars=250)
  URL to redirect after payment method is added.

- `customer` (optional, string)
  Parameters for customer
  - `id` (required, string, max chars=50)
    Identifier of the customer.

- `card` (optional, string)
  Parameters for card
  - `gateway_account_id` (optional, string, max chars=50)
    The gateway account in which this payment source is stored.

## Returns

- `hosted_page` (Hosted page object)
  Resource object representing hosted\_page