# Handling redirect payment methods
If you're using [Drop-in payments](https://docs.digitalriver.com/commerce-api/payments/payments-solutions/drop-in) and customers opt to fund a transaction with a [payment method](https://docs.digitalriver.com/commerce-api/payments/supported-payment-methods), such as [Bancontact](https://docs.digitalriver.com/commerce-api/payments/supported-payment-methods/bancontact), [Klarna](https://docs.digitalriver.com/commerce-api/payments/supported-payment-methods/klarna), and [SEPA Direct Debit](https://docs.digitalriver.com/commerce-api/payments/supported-payment-methods/sepa-direct-debit), whose resulting [source](https://www.digitalriver.com/docs/commerce-admin-api/#tag/Source/operation/retrieveSources) has a [`flow` ](https://docs.digitalriver.com/commerce-api/sources#authentication-flow)of `redirect` must be redirected to the payment provider, where they either approve or cancel the funds transfer.
We recommend [submitting the cart](https://www.digitalriver.com/docs/commerce-shopper-api/#tag/Submit-Cart) and then redirecting the customer to do this.
{% hint style="info" %}
Refer to the table in the [Supported payment methods](https://docs.digitalriver.com/commerce-api/payments/supported-payment-methods) section for a list of payment methods that require a [submit then redirect flow](https://docs.digitalriver.com/commerce-api/payments/flows-by-payment-type#submit-then-redirect-str).
{% endhint %}
On this page, you find:
* [A high-level overview of how to implement a submit and redirect flow](#how-to-implement-a-submit-then-redirect-flow)
* [A sequence diagram that depicts the interactions between the participants](#submit-and-redirect-sequence-diagram)
### How to implement a submit then redirect flow
In the [`createDropin()`](https://docs.digitalriver.com/commerce-api/resources/reference/digitalriver-object#creating-an-instance-of-drop-in) method's [configuration object](https://docs.digitalriver.com/commerce-api/payments-solutions/drop-in/drop-in-integration-guide#configuring-payment-methods-within-drop-in-payments), set the [`redirect` ](https://docs.digitalriver.com/commerce-api/payments-solutions/drop-in/drop-in-integration-guide#dropinviadigitalriver.js-disablingredirectswithindropin-1)object's `disableAutomaticRedirects` to `true` and assign the same value to both `returnUrl` and `cancelUrl`.
If customers select a redirect payment method, the `data` returned by [`onSuccess` ](https://docs.digitalriver.com/commerce-api/payments-solutions/drop-in/drop-in-integration-guide#onsuccess)contains a [source ](https://docs.digitalriver.com/commerce-api/payments/sources)whose [`state`](https://docs.digitalriver.com/commerce-api/sources#source-state) is `pending_redirect`. When you receive this event, retrieve `source.id` from `data`.
```javascript
let digitalRiver = new DigitalRiver("Your public API key", {
"locale": "en-GB"
});
let configuration = {
"sessionId": "fe50c56f-88a4-4961-8142-7d4784b87264",
"options": {
"flow": "checkout",
"redirect": {
"disableAutomaticRedirects": true,
"returnUrl": "https://mywebsite.com/paymentCallBack.html",
"cancelUrl": "https://mywebsite.com/paymentCallBack.html"
},
...
},
onSuccess: function(data) {
//send sourceId to your backend
var sourceId = data.source.id;
},
...
}
let dropin = digitalriverpayments.createDropin(configuration);
dropin.mount("drop-in");
```
Next, pass this identifier in a server-side [attach source to an order or cart](https://docs.digitalriver.com/commerce-api/sources#attaching-a-payment-method-to-an-order-or-cart).
```javascript
curl --location --request POST 'https://api.digitalriver.com//v1/shoppers/me/carts/active/apply-payment-method' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer 'Your secret API key' \
...
--data-raw '{
"paymentMethod": {
"sourceId": "e7ba0595-059c-460c-bad8-2812123b9313"
}
}
```
This operation moves the source into "pending redirect" state, the order state to "Source pending redirect", and provides you with the `redirectUrl` to present to the customer:
{% tabs %}
{% tab title="POST /shoppers/me/carts/active/apply-payment-method" %}
```javascript
{
"clientId": "gc",
"channelId": "drdod15",
"liveMode": false,
"id": "5ce08114-143b-4bf6-ae0e-6fc501ee0c24",
"clientSecret": "5ce08114-143b-4bf6-ae0e-6fc501ee0c24_a468b08e-2c47-4531-82af-d48d80ff6dcc",
"type": "alipayCn",
"reusable": false,
"owner": {
"firstName": "Donglei",
"lastName": "Ye",
"email": "j2r23ux28qj@temporary-mail.net",
"phoneNumber": "13063725095",
"address": {
"line1": "Wei Bai Chang",
"city": "ShunDe District)",
"state": "Guangdong",
"country": "CN",
"postalCode": "528322"
}
},
"amount": "10.00",
"currency": "CNY",
"state": "pending_redirect",
"creationIp": "10.81.3.92",
"createdTime": "2020-02-26T02:48:11.508Z",
"updatedTime": "2020-02-26T02:48:11.508Z",
"flow": "redirect",
"redirect": {
"redirectUrl": "https://api.digitalriverws.com:443/payments/redirects/51314834-9bf9-483f-b3a7-4b36a14d3f5c?apiKey=pk_hc_e03ee62c0d964bb3ac75595b1203d13c",
"returnUrl": "returnUrl.com"
},
"alipayCn+": {}
}
```
{% endtab %}
{% endtabs %}
At this point, retrieve the [cart](https://www.digitalriver.com/docs/commerce-api-reference/#tag/Carts/paths/~1v1~1shoppers~1me~1carts~1active/get) data you need—such as `currency`, `orderTotal`, `subTotal`, `tax`, `billingAddress`, `shippingAddress`,`payment.sources[]`, and relevant `lineItems` —to build a review page.
If, after reviewing the transaction's details, customers click your submit order button, handle that event by passing the [checkout's](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Checkouts) `id` to your server and sending it in the body of a [create order request](https://docs.digitalriver.com/digital-river-api/order-management/creating-and-updating-an-order#creating-an-order-with-the-checkout-identifier).
{% tabs %}
{% tab title="POST /orders" %}
```
curl --location 'https://api.digitalriver.com/orders' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer 'Your secret API key' \
...
--data '{
"checkoutId": "c2aabaee-e414-40cc-93f6-9b4d17eef863"
}'
```
{% endtab %}
{% endtabs %}
If you get back a `201 Created`, and the [order's](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Orders) [`state`](https://docs.digitalriver.com/digital-river-api/developer-resources/digital-river-api-reference/orders/the-order-lifecycle#order-states-and-events) is `pending_payment`, then check [`payment.session.state`](https://docs.digitalriver.com/digital-river-api/integration-options/checkouts/creating-checkouts/payment-sessions#session-state).
{% tabs %}
{% tab title="Order" %}
```javascript
{
"id": "240354510336",
...
"payment": {
...
"session": {
"id": "1b682138-ce9f-46ec-8b5e-94b710128cd9",
"amountContributed": 37.5,
"amountRemainingToBeContributed": 0.0,
"state": "pending_redirect",
"clientSecret": "1b682138-ce9f-46ec-8b5e-94b710128cd9_c45043e2-39bc-4c0d-9fc2-fece4f6298c3",
"nextAction": {
"action": "redirect",
"data": {
"redirectUrl": "https://api.digitalriver.com:443/payments/redirects/3fab742c-a7e8-4a90-8951-86d071fa070d?apiKey=pk_test_a45b91ba4f984df7a229b2ab5941ce1c"
}
}
}
},
"state": "pending_payment",
...
}
```
{% endtab %}
{% endtabs %}
If its value is `pending_redirect`, and `payment.session.nextAction.data.redirectUrl` is a non-null value, then redirect customers to this third-party provider's interface URL, where they can either approve or cancel payment.
{% hint style="info" %}
If the order's `state` is `pending_payment` and the `payment.session.state` is `pending_funds`, refer to the [Delayed payment flow](https://docs.digitalriver.com/commerce-api/payments/flows-by-payment-type#delayed-payment-flow) section.
{% endhint %}
Once customers complete either of these actions, they're redirected to the endpoint you assigned to `cancelUrl` and/or `returnUrl`.
When this resource loads, call a function that initiates a server-side request and sends the [order's](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Orders) identifier and `refresh` in the path.
```
curl --location --request POST 'https://api.digitalriver.com/orders/240354510336/refresh' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer ' \
...
--data-raw ''
```
If you get a `200 OK`, check the order's [`state`](https://docs.digitalriver.com/digital-river-api/developer-resources/digital-river-api-reference/orders/the-order-lifecycle#order-states-and-events) and [`payment.session.state`](https://docs.digitalriver.com/digital-river-api/integration-options/checkouts/creating-checkouts/payment-sessions#session-state).
{% tabs %}
{% tab title="Order" %}
```
{
"id": "275469160336",
...
"payment": {
...
"session": {
"id": "b9abd9fd-5664-4533-a8ae-e5758663f748",
"amountContributed": 62.48,
"amountRemainingToBeContributed": 0.0,
"state": "complete",
"clientSecret": "b9abd9fd-5664-4533-a8ae-e5758663f748_7a85f52e-5491-4069-be1e-26c238456071"
}
},
"state": "accepted",
"stateTransitions": {
"accepted": "2023-07-20T19:34:41Z",
"pending_payment": "2023-07-20T19:25:42Z"
},
...
}
```
{% endtab %}
{% endtabs %}
If (1) [`state`](https://docs.digitalriver.com/digital-river-api/developer-resources/digital-river-api-reference/orders/the-order-lifecycle#order-states-and-events) is `accepted` or `in_review` or (2) `state` is `pending_payment` and [`payment.session.state`](https://docs.digitalriver.com/digital-river-api/integration-options/checkouts/creating-checkouts/payment-sessions#session-state) is `pending` or `pending_funds`, then a [`charges[]`](https://docs.digitalriver.com/digital-river-api/developer-resources/digital-river-api-reference/payment-charges) on the [`sources[]`](https://docs.digitalriver.com/digital-river-api/payments/payment-sources) whose [`flow`](https://docs.digitalriver.com/digital-river-api/payments/payment-sources#authentication-flow) is `redirect` has been successfully authorized, and you should display an order confirmation page and send a[ confirmation email](https://docs.digitalriver.com/digital-river-api/order-management/customer-notifications#order-confirmation).
At this point, you can initiate [fulfillment operations](https://docs.digitalriver.com/digital-river-api/order-management/fulfillments).
Any other (1) [`state`](https://docs.digitalriver.com/digital-river-api/developer-resources/digital-river-api-reference/orders/the-order-lifecycle) value or (2) combination of `state` and [`payment.session.state`](https://docs.digitalriver.com/digital-river-api/integration-options/checkouts/creating-checkouts/payment-sessions#session-state) values indicate that the [order](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Orders) can't be recovered. As a result, you'll need to recreate the [checkout](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Checkouts) and send customers back to the payment collection stage. For details, refer to [Handling rejected orders](https://docs.digitalriver.com/digital-river-api/order-management/resubmitting-an-order).