---
title: Submit the card form with your own button
description: Expand the credit and debit card form in PayPal Checkout and
  replace its submit button with a button on your own page.
badges:
  - type: neutral
    text: JavaScript SDK v5
---

# Submit the card form with your own button (/platforms/checkout/standard/customize/card-form-submit-button)



When a payer chooses to pay with a credit or debit card in PayPal Checkout, the PayPal buttons show a card form with its own submit button.

You can change this behavior so that:

* The card form expands automatically when the buttons render.
* PayPal hides the card form's submit button, and your own button submits the card form instead.

Use this customization when your checkout page already has a primary action, such as a **Place order** button, and you want payers to complete card payments with it.

## Availability [#availability]

* **JavaScript SDK version:** v5
* **Integration:** Credit and debit card payments in PayPal Checkout. This customization doesn't apply to Advanced Credit and Debit Card payments.
* **Regions:** Available globally.

## Know before you code [#know-before-you-code]

> **Info:**
>
> ### PayPal Checkout [#paypal-checkout]
>
> This feature modifies an existing PayPal Checkout integration and uses the following:
>
> * [JavaScript SDK:](/sdk/js/v5/reference) Adds PayPal-supported payment methods.
> * [Orders REST API:](/api/orders/v2) Create, update, retrieve, authorize, and capture orders.
>
> [PayPal Checkout](/checkout)

## Expand the card form [#expand-the-card-form]

Set `expandCardForm` to `true` when you call `paypal.Buttons()`. The card form expands when the buttons render, so payers don't need to select the card button first.

```javascript
paypal.Buttons({
  expandCardForm: true,
  createOrder: function (data, actions) {
    // Create the order, called when the buttons render if expandCardForm is true
  },
  onApprove: function (data, actions) {
    // Capture the order
  },
}).render("#paypal-button-container");
```

## Use your own submit button [#use-your-own-submit-button]

To submit the card form from your own button:

1. Set `expandCardForm` to `true`.
2. Set `hideSubmitButtonForCardForm` to `true` to hide the card form's **Pay** button, which shows the order amount.
3. Assign the result of `paypal.Buttons()` to a variable before you render it.
4. Call `submitCardForm()` on that variable when the payer selects your button.

```javascript
const paypalButtons = paypal.Buttons({
  expandCardForm: true,
  hideSubmitButtonForCardForm: true,
  createOrder: function (data, actions) {
    // Create the order
  },
  onApprove: function (data, actions) {
    // Capture the order
  },
  onError: function (err) {
    // Show an error message to the payer
  },
});

paypalButtons.render("#paypal-button-container");

// Call this function from your own submit button
function onSubmitClick() {
  paypalButtons.submitCardForm();
}
```

```html
<div id="paypal-button-container"></div>
<button type="button" onclick="onSubmitClick()">Place order</button>
```

> **Note:** Set `expandCardForm` to `true` when you use `hideSubmitButtonForCardForm`, and provide a button that calls `submitCardForm()`. Payers can then use your page's button to submit their card details.

### Handle the result [#handle-the-result]

When your page calls `submitCardForm()`, the method returns a promise that resolves without a value. Use your callbacks to handle the result:

* `onApprove` runs after the payer's card payment is approved.
* `onError` runs if an error prevents the payment from completing.

The callbacks run after the card form passes field validation. If a required field is empty or contains a value that isn't valid, the form highlights it so the payer can correct it and select your button again.

## Test your integration [#test-your-integration]

Test the card form in the sandbox with a test card number. Real card numbers don't work in the sandbox.

1. Generate a test card number with the [credit card generator](/credit-card-number-generator).
2. Load your checkout page. The card form is expanded, and the card form's **Pay** button is hidden.
3. Enter the test card number, an expiration date in the future, a security code, and a billing address.
4. Select your submit button.
5. Confirm that `onApprove` runs and that your server captures the order.

## Reference [#reference]

| Option or method              | Type       | Description                                                                                        |
| ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------- |
| `expandCardForm`              | `boolean`  | If `true`, the card form expands automatically when the buttons render.                            |
| `hideSubmitButtonForCardForm` | `boolean`  | If `true`, hides the card form's **Pay** button.                                                   |
| `submitCardForm()`            | `function` | Submits the card form and returns a promise. Call it on the object returned by `paypal.Buttons()`. |

## Default behavior [#default-behavior]

Existing integrations keep the default behavior: the payer selects the card button to open the form, and PayPal shows the form's **Pay** button.