# Save a payment method with Drop-in

# Supported payment methods

| Payment method  | Country / Region |
| :-------------- | :--------------- |
| Card            | Global           |
| DANA            | Indonesia        |
| Boost           | Malaysia         |
| Touch'n Go      | Malaysia         |
| Alipay          | China            |
| AlipayHK        | Hong Kong        |
| GCash           | Philippines      |
| KakaoPay        | South Korea      |
| Rabbit LINE Pay | Thailand         |
| TrueMoney       | Thailand         |

# Learn how to Set up payment information and charge them later

The [Setup intent API](api-53878137) lets you save your customer's payment details without initial payment and charge them in the future.

Use this integration to set up recurring payments or to create one-time payment with a final amount determined later, often after the customer receives your service.

Completing this integration requires six steps, and best practices can be found in the following use cases.

## 1. [Create a Customer](api-55528906)

*Request* 

```JSON
{
    "email":"testsetup@gmail.com"
}
```

*Response*

```JSON
{
    "id": "cus_1704682776109776896",
    "object": "customer",
    "created": 1695263020000,
    "livemode": false,
    "address": {},
    "email": "testsetup@gmail.com"
}
```

## 2. [Create a SetupIntent](api-53878137)

For now, we support `card`as a payment method with SetupIntent. You can create a Setupintent with `payment_method_types = ["card]`

*Request* 

```JSON
{   
    "customer":"cus_1704682776109776896",
    "payment_method_types" : ["card"],
    "usage": "off_session",
    "return_url":"https://wooshpay.com"
}
```

*Response*

```JSON
{
    "id": "seti_1704683221188345856",
    "object": "setup_intent",
    "created": 1695263126075,
    "livemode": false,
    "status": "requires_payment_method",
    "customer": "cus_1704682776109776896",
    "client_secret": "seti_1704683221188345856_secret_0ZrCdUri7enbgZwzRPTPoQXV",
    "payment_method_types": [
        "card"
    ],
    "payment_method_options": {
        "card": {
            "request_three_d_secure": "auto",
            "setup_future_usage": "off_session"
        }
    },
    "return_url": "https://wooshpay.com"
}
```

### Retrieve the client secret

Included in the returned SetupIntent is a client secret, which the client side uses to securely complete the payment process instead of passing the entire SetupIntent object.

## 3. Collect payment details

Pass the client secret from the previous step into options when you create the Element instance

```HTML
<form id="payment-app">
  <div>
    <!--Wooshpay Will Inject the Payment Element At Here-->
  </div>
  <div class="submit-app">
    <button id="submit-btn">Save card</button>
    <div id="payment-err"></div>
  </div>
</form>

<script src="https://js.wooshpay.com/v1/wooshpay.js"></script>
```



```JavaScript
  // Get your Dom
  const app = document.getElementById("payment-app");
  // Initialize Wooshpay
  const wooshpay = Wooshpay("pk_test_xxxx" /* publishable key */, {
    locale: "en",
  });
  const options = {
    clientSecret: "{{CLIENT_SECRET}}",
    // Fully customizable with appearance API.
    appearance: {
      /*...*/
    },
  };
  // Set up Wooshpay.js and Elements using the SetupIntent's client secret
  const elements = wooshpay.elements(options);
  // Create and mount the Payment Element
  elements.create("payment", {
    billingDetails: "never", // billingDetails:'auto'
  });
  elements.mount(app);
```

## 4. Submit the payment details to Wooshpay

You can complete the setup using Wooshpay.confirmSetup. Provide a return_url

in this function so that customer can be redirected after they compelet setup.

```JavaScript
  const {error} = await wooshpay.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://XXXXXXXX',
    }
  });
```

## 5. Retrieve the payment method attached to the customer

To find a  payment method to charge, list the payment methods associated with the customers using [List a Customer's PaymentMethods](api-112153316). 

*Request* 

```JSON
{
    "type":"card"
}
```

## 6. Charge the saved payment method later 

Using the Customer and PaymentMethod ID to create a payment intent. 

When you already have the Customer and Paymentmethod IDs, create PaymentIntent with the amount and currency of the payment. 

Before that, there are some parameters in PaymentIntent you need to know.


1. `confirm`: If your set it to `true`, payment will be confirmed immediately when the paymentintent is created.
2. Set `payment_method` to the ID of the PaymentMethod and `Customer` to the ID of the Customer.

### [Create a PaymentIntent](api-42631218)
*Request* 

```JSON
{
    "amount": 1000,
    "currency": "USD",
    "confirm": true,
    "off_session":false,
    "customer":"cus_1704388704790904832",
    "payment_method":"pm_1704478135803707392",
    "return_url": "https://wooshpay.com"
}
```

*Response*

```JSON
{
    "id": "pi_1704478320244031488",
    "object": "payment_intent",
    "created": 1695214274000,
    "livemode": false,
    "currency": "USD",
    "amount": 1000,
    "status": "succeeded",
    "customer": "cus_1704388704790904832",
    "client_secret": "pi_1704478320244031488_secret_wqlE0XivPRU1d3zkAaJUir52",
    "payment_method_types": [
        "card"
    ],
    "confirmation_method": "automatic",
    "payment_method_options": {
        "card": {
            "request_three_d_secure": "auto",
            "setup_future_usage": "off_session"
        }
    },
    "return_url": "https://wooshpay.com",
    "payment_method": "pm_1704478135803707392",
    "amount_received": 1000,
    "capture_method": "automatic",
    "latest_charge": "ch_1704478320336306176"
}
```