Submit the card form with your own 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

• 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

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.

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

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.

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();
}

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

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 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.
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

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.