> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring Payment Options

Once you have the components ready you will need to pass on these components along with the `payment_session_id`to `cashfree.js`. Here is an example of a payment options. You can see there are three properties to it:

1. `paymentMethod`: This is the component which will be used for the payment.
2. `paymentSessionId`: This is the `payment_session_id` which you get once you have created an order.
3. Other attributes likes `returnUrl`, `savePaymentInstrument` etc.

```js theme={"dark"}
let paymentOptions = {
	paymentMethod: component,
	paymentSessionId: "your-payment-session-id",
	savePaymentInstrument: true,
};
```

### paymentOptions

<ResponseField name="paymentMethod" type="object" required>
  A reference to a payable component. Kindly note that the payable component should be ready and complete before invoking pay on it, otherwise it will throw an error. To get if a payable component is complete or not you can use component.`isComplete()` which returns a bool.

  There are scenarios when one component also requires other components, in that case you will have to also check the completeness of those other component. Example- to process card you would need to make sure cardNumber, cardExpiry, cardCvv and cardHolder are all complete.
</ResponseField>

<ResponseField name="paymentSessionId" type="string" required>
  To make payment you will need a paymentSessionId, you can get this by making a [create order API](/api-reference/payments/latest/orders/create) call to `POST /orders`. Please make sure you are using the correct hostname for the environment you want to process the payment for.

  In the response of `POST /orders` you will find `payment_session_id`. Note that this is a backend call so you will need to have a server. Read how to [generate `payment_session_id` in the create order API reference](/api-reference/payments/latest/orders/create)
</ResponseField>

<ResponseField name="returnUrl" type="string" optional>
  This is the url where your customers will be redirected after they have
  complete the payment.
</ResponseField>

<ResponseField name="redirect" type="string" optional>
  For certain `paymentMethod` you can choose to not redirect the customer to the `returnUrl` by passing `if_required`. Examples would be Card, UPI and QR. For payment method where redirection is required this flag will be completely ignored. If you decide not to redirect the customer then `pay()` promise resolves with `{paymentDetails: {paymentMessage: "Payment finished. Check status."}}`. To confirm the payment it is recommended that you always check the status of your order from your backend server with Cashfree.
</ResponseField>

<ResponseField name="redirectTarget" type="string" optional>
  We also provide a way for you to decide how to redirect your customer. This takes all the values that are valid for hyperlink. Default is `_self`

  | Value         | Description                                                                     |
  | ------------- | ------------------------------------------------------------------------------- |
  | `_blank`      | Opens the linked document in a new window or tab                                |
  | `_self`       | Opens the linked document in the same frame as it was clicked (this is default) |
  | `_parent`     | Opens the linked document in the parent frame                                   |
  | `_top`        | Opens the linked document in the full body of the window                        |
  | `_framename_` | Opens the linked document in the named iframe                                   |
</ResponseField>

<ResponseField name="savePaymentInstrument" type="object" optional>
  Assign a `savePaymentInstrument` to this to save the payment method. Works only for card payment. Default is `null`.

  ```js theme={"dark"}
  let saveOptions = {
  	values: {
  		label: "Save Card for later"
  	}
  };
  let savecard = cashfree.create("savePaymentInstrument", saveOptions);
  savecard.mount("#div-id");

  let cashfree = Cashfree();
  .....
  cashfree.pay({
    ...
    savePaymentInstrument: savecard
  })
  ```
</ResponseField>

<ResponseField name="offerId" type="object" optional>
  You can pass an offer in the object which you can fetch using the [get offer
  api](/api-reference/payments/latest/eligibility/get-eligible-offers-for-an-order). Please note that you need to use the
  `offer_id` value only. It is a uuid.
</ResponseField>

<div class="hidden" data-table-of-contents="bottom">
  <p class="mt-4 font-medium flex items-center gap-2 related-docs-heading">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="w-4 h-4">
      <path d="M3 4h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3z" />

      <path d="M21 4h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z" />
    </svg>

    <span>Related topics</span>
  </p>

  <ul>
    <li><a href="/docs/api-reference/payments/latest/orders/create">Create Order API</a></li>
    <li><a href="/docs/api-reference/payments/latest/eligibility/get-eligible-offers-for-an-order">Get Eligible Offers API</a></li>
  </ul>
</div>