---
updatedAt: 2025-06-04T21:10:25.000Z
agentTools:
  projectIndex: https://developer.fundraisingbox.com/llms.txt
---

# Credit card data processing

Credit card fields are special fields in iframes. Neither the FundraisingBox nor your server has direct access to the safety critical number and secure id. So these fields need a special treatment of handling and we recommend to use our jQuery-Plugin which does a lot of helpful automatic work for you.

> 📘 Available now: PayPal credit card
>
> From April 2, 2025, credit card payments is also possible via PayPal. This payment method must be activated in the FundraisingBox. Only one credit card payment can be activated.\
> If you have already activated credit card payments with Stripe or MicroPayment, you only need to adjust the HTML for the placeholders and hidden fields and add your style information as constructor options. Unlike Stripe, the field for credit card holders is also generated by PayPal.

***

## Required fields

The plugin automatically loads the extra javascript if all required credit card fields with following IDs exist.

* payment\_credit\_card\_owner
* payment\_credit\_card\_number
* payment\_credit\_card\_number\_hidden
* payment\_credit\_card\_secure\_id
* payment\_credit\_card\_secure\_id\_hidden
* payment\_credit\_card\_token

Additional if **micropayment** is used:

* payment\_credit\_card\_expire\_date\_month
* payment\_credit\_card\_expire\_date\_year

Additional if **Stripe** is used:

* payment\_credit\_card\_expiry
* payment\_credit\_card\_expiry\_hidden
* payment\_credit\_card\_network

Additional if **PayPal** is used:

* payment\_credit\_card\_expiry
* payment\_credit\_card\_expiry\_hidden

> 🚧 You have to use these IDs!

<br />

### Stripe example:

```html
<div>
  <div id="payment_credit_card_owner_wrapper">
    <div class="label">
      <label for="payment_credit_card_owner">Karteninhaber/-in&nbsp;*</label>
    </div>
    <div class="field">
      <input type="text" id="payment_credit_card_owner" name="payment[credit_card_owner]" autocomplete="off">
    </div>
    <div class="error" id="payment_credit_card_owner_error"></div>
  </div>
  
  <input type="hidden" id="payment_credit_card_token" name="payment[credit_card_token]">
  <input type="hidden" id="payment_credit_card_network" name="payment[credit_card_network]">
  
  <div id="payment_credit_card_number_wrapper">
    <div class="label">
      <label for="payment_credit_card_number">Kartennummer&nbsp;*</label>
    </div>
    <div class="field">
      <div id="payment_credit_card_number"></div>
    </div>
    <div class="error" id="payment_credit_card_number_error"></div>
  </div>
  <div id="payment_credit_card_number_hidden_wrapper">
    <div class="label">
      <label for="payment_credit_card_number_hidden">Kartennummer&nbsp;*</label>
    </div>
    <div class="field">
      <input type="text" id="payment_credit_card_number_hidden" name="payment[credit_card_number_hidden]" readonly="readonly">
    </div>
    <div class="error" id="payment_credit_card_number_hidden_error"></div>
  </div>
  
  <div id="payment_credit_card_secure_id_wrapper">
    <div class="label">
      <label for="payment_credit_card_secure_id">Prüfnummer&nbsp;*</label>
    </div>
    <div class="field">
      <div id="payment_credit_card_secure_id"></div>
    </div>
    <div class="error" id="payment_credit_card_secure_id_error"></div>
  </div>
  <div id="payment_credit_card_secure_id_hidden_wrapper">
    <div class="label">
      <label for="payment_credit_card_secure_id_hidden">Prüfnummer&nbsp;*</label>
    </div>
    <div class="field">
      <input type="text" id="payment_credit_card_secure_id_hidden" name="payment[credit_card_secure_id_hidden]" readonly="readonly">
    </div>
    <div class="error" id="payment_credit_card_secure_id_hidden_error"></div>
  </div>
  
  <div id="payment_credit_card_expiry_wrapper">
    <div class="label">
      <label for="payment_credit_card_expiry">Gültig bis&nbsp;*</label>
    </div>
    <div class="field">
      <div id="payment_credit_card_expiry"></div>
    </div>
    <div class="error" id="payment_credit_card_expiry_error"></div>
  </div>
  <div id="payment_credit_card_expiry_hidden_wrapper">
    <div class="label">
      <label for="payment_credit_card_expiry_hidden">Gültig bis&nbsp;*</label>
    </div>
    <div class="field">
      <input type="text" id="payment_credit_card_expiry_hidden" name="payment[credit_card_expiry_hidden]" readonly="readonly">
    </div>
    <div class="error" id="payment_credit_card_expiry_hidden_error"></div>
  </div>
  
</div>
```

<br />

### PayPal example:

```html
<div id="credit-card-fields">
  <div id="payment_credit_card_owner_wrapper">
    <label for="payment_credit_card_owner">Karteninhaber*in</label>
    <div id="payment_credit_card_owner"></div>
    <small id="payment_credit_card_owner_error"></small>
  </div>
  
  <div id="payment_credit_card_number_wrapper">
    <label for="payment_credit_card_number">Kartennummer</label>
    <div id="payment_credit_card_number"></div>
    <small id="payment_credit_card_number_error"></small>
  </div>
  <div id="payment_credit_card_number_hidden_wrapper">
    <label for="payment_credit_card_number_hidden">Kartennummer</label>
    <input type="text" id="payment_credit_card_number_hidden" name="payment[credit_card_number_hidden]" readonly>
    <small id="payment_credit_card_number_hidden_error"></small>
  </div>
  
  <div id="payment_credit_card_secure_id_wrapper">
    <label for="payment_credit_card_secure_id">Prüfnummer</label>
    <div id="payment_credit_card_secure_id"></div>
    <small id="payment_credit_card_secure_id_error"></small>
  </div>
  <div id="payment_credit_card_secure_id_hidden_wrapper">
    <label for="payment_credit_card_secure_id_hidden">CVC</label>
    <input type="text" id="payment_credit_card_secure_id_hidden" name="payment[credit_card_secure_id_hidden]" readonly>
    <small id="payment_credit_card_secure_id_hidden_error"></small>
  </div>
  
  <div id="payment_credit_card_expiry_wrapper">
    <label for="payment_credit_card_expiry">Gültig bis</label>
    <div id="payment_credit_card_expiry"></div>
    <small id="payment_credit_card_expiry_error"></small>
  </div>
  <div id="payment_credit_card_expiry_hidden_wrapper">
    <label for="payment_credit_card_expiry_hidden">Gültig bis</label>
    <input type="text" id="payment_credit_card_expiry_hidden" name="payment[credit_card_expiry_hidden]" readonly>
    <small id="payment_credit_card_expiry_hidden_error"></small>
  </div>
</div>

<input type="hidden" id="payment_credit_card_token" name="payment[credit_card_token]">
```

<br />

## iframe-inputs

As you can see in the example above there is only an empty "payment\_credit\_card\_number"-div, a "payment\_credit\_card\_secure\_id"-div, a "payment\_credit\_card\_expiry"-div and, for PayPal, "payment\_credit\_card\_secure\_name"-div. Our plugin injects automatically the iframe-inputs into these divs.

<br />

## Styling

### Styling Stripe and MicroPayment

> 📘
>
> As you don't have direct access to the inputs in the iframe, you have to style the surrounding divs e.g. "#payment\_credit\_card\_number" like they were inputs.

**creditCardFieldTemplate-Option**\
You can provide a "template" for the iframe-inputs, in general we recommend to use the "credit\_card\_owner"-field. If a template is given, our plugin sets the border to "0", the width to "100%" and the background to "none" of the iframe-inputs. It also copies the height and the font-styles of the template to the iframe-inputs.\
This automatic style propagation takes place on window resize as well.\
By default the template is set to "payment\_credit\_card\_owner".

```javascript
myForm = $("#form").fundraisingBoxForm({
  hash: "{your_form_hash}",
  creditCardFieldTemplate: "payment_credit_card_owner"
});
```

> 📘 Custom fonts
>
> For security reasons custom fonts are not possible in the iframe-inputs.

If you want to style the iframe-inputs directly, you can use the "creditCardStyle()"-function (see [Functions](https://developer.fundraisingbox.com/reference/form-api-functions#section-creditcardstyle-css-)). But we do not recommend this.

> 📘 Recommendation
>
> Use the "creditCardCopyStyleFromTemplate()"-function (see [Functions](https://developer.fundraisingbox.com/reference/form-api-functions#section-creditcardcopystylefromtemplate-)) when you toggle your credit card fieldset to ensure the correct stylings.

#### Focus

It's a good manner to highlight the currently focused field, but highlighting the iframe-inputs is not easily possible. So our plugin sets a "focus"-class to the "payment\_credit\_card\_number"-div, "payment\_credit\_card\_secure\_id"-div and "payment\_credit\_card\_expiry"-div if the respective iframe-input is focused.\
You can now consider this class for your design.

Our plugin considers the other way around as well: if a label is clicked, the respective iframe-input is focused.

<br />

### Styling PayPal

Add `constructor options` to your form in the function fundraisingBoxForm for your custom input style:

```javascript
myForm = $('#form').fundraisingBoxForm({
  ...
  paypalCreditCardFieldStyles: {
    'border': '0.0625rem solid #909697',
    'border-radius': '0.25rem',
    'background': '#ffffff',
    'font-family': 'inherit',
    'font-size': '1rem',
    'line-height': '1.5rem',
    'padding': '1px 2px',
  },
  paypalCreditCardFieldInvalidStyles: {
    'border': '0.0625rem solid purple',
    'color': 'purple',
  },
});`
```

See the complete list of allowed style options for PayPal cardFields: <https://developer.paypal.com/sdk/js/reference/#style-card-fields>

<br />

## Create token

If the option "autoSubmit" is active (default) the plugin automatically call the "creditCardMakeToken()"-function (see [Functions](https://developer.fundraisingbox.com/reference/form-api-functions#section-creditcardmaketoken-) and trys to create the credit card token before sending the data to the payment session. If you disable autoSubmit you have to call the "creditCardMakeToken()" by yourself.

<br />

## Readonly "Hidden"-fields

After creating the credit card token, the credit card data is returned in an obfuscated format and set as the value of hidden input fields.

For Stripe and Micropayment, the card number is masked except for the last four digits. For example, 1234123412341234 will be returned as `************1234`.

For PayPal, the entire card number is masked with asterisks: `****************`.

The secure ID (CVV) is always fully masked as \*\*\*.

If a session contains a credit\_card\_token, the following wrapper elements will be hidden:\
payment\_credit\_card\_number\_wrapper\
payment\_credit\_card\_secure\_id\_wrapper\
payment\_credit\_card\_expiry\_wrapper

To display the obfuscated credit card data to the user, use the input fields of the hidden fields:

payment\_credit\_card\_number\_hidden\
payment\_credit\_card\_secure\_id\_hidden\
payment\_credit\_card\_expiry\_hidden\
These hidden fields should be readonly.

<br />

## Reset and Reinitialization

The function "creditCardReset()" will reset the token, show the wrapper elements and render the iframe-inputs and hides the "\_hidden"-fields.

```javascript
myForm.creditCardReset(); 
```

<br />

## Code examples

### Simple Stripe credit card fields code example

```html
<style>
  input:focus, .focus {
    border-color: #0f0;
  }
</style>

<form id="form">
	<div id="myFormFields"></div>
	<input type="submit" value="submit">
</form>

<script src="path/to/jquery.min.js"></script>
<script src="https://secure.fundraisingbox.com/js/jquery.fundraisingbox.min.js"></script>
<script>
$(function() {
    myForm = $("#form").fundraisingBoxForm({
        hash: "{your_form_hash}",
        creditCardFieldTemplate: "payment_credit_card_owner"
    });

    myForm.on("fundraisingBox:init", function(event) {
        myForm.appendFieldRowsTo("#myFormFields", [
            "payment_method",
            "credit_card_owner",
            "credit_card_token",
            "credit_card_network",
            "credit_card_number",
            "credit_card_number_hidden",
            "credit_card_secure_id",
            "credit_card_secure_id_hidden",
            "credit_card_expiry",
            "credit_card_expiry_hidden"
        ]);
      	
      	// reset the fields on payment method change
        $("#payment_payment_method").change(function() {
            if($(this).val() != "stripe_credit_card")
            {
                myForm.creditCardReset();
            }
        });
      
      	// some custom styling
        myForm.on("fundraisingBox:creditCardReady", function() {
            myForm.creditCardStyle("color", "#00f");
        });
    });
});
</script>
```

<br />

### Simple PayPal credit card fields code Example

```html
<form id="form">
    <div id="myFormFields"></div>
    <div id="credit_card_wrapper" style="display: none"></div>
    <div>
        <a id="jsResetCard" style="display: none">Neue Karte eingeben</a>
    </div>
    <input type="submit" value="submit">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://secure.fundraisingbox.com/js/jquery.fundraisingbox.min.js"></script>
<script>
    $(function() {
        myForm = $("#form").fundraisingBoxForm({
            hash: 'YOUR_FORM_HASH',
            sandboxHash: 'YOUR_SANDBOX_HASH',
            fbHost: 'https://secure.fundraisingbox.com',
            debug: true,
            paypalCreditCardFieldStyles: {
                border: '0.0625rem solid #909697',
            },
            paypalCreditCardFieldInvalidStyles: {
                border: '0.0625rem solid purple',
            },
        });

        myForm.on("fundraisingBox:init", function(event) {
            //append formFields
            myForm.appendFieldRowsTo("#myFormFields", [
                "amount",
                "interval",
                "first_name",
                "last_name",
                "payment_method",
            ]);

            //append creditCardFields
            myForm.appendFieldRowsTo("#credit_card_wrapper", [
                "credit_card_owner",
                "credit_card_number",
                "credit_card_number_hidden",
                "credit_card_secure_id",
                "credit_card_secure_id_hidden",
                "credit_card_expiry",
                "credit_card_expiry_hidden",
            ]);

            //append hidden field
            myForm.appendFieldTo("#myFormFields", "credit_card_token");

            //toggle creditCardFields
            const $paymentMethod = $('#payment_payment_method');
            const $creditCardWrapper = $('#credit_card_wrapper');
            $paymentMethod.on('change', function () {
                console.log('change', this.value);
                if (this.value.indexOf('credit_card') !== -1) {
                    $creditCardWrapper.show();
                    $('#jsResetCard').show();
                } else {
                    $creditCardWrapper.hide();
                    $('#jsResetCard').hide();
                }
            });

            //resetCreditCard
            $('#jsResetCard').on('click', () => myForm.creditCardReset());
        });

        myForm.on("fundraisingBox:payment", function(event) {
            if($('#payment_credit_card_token').val()) $('#jsResetCard').show();
        })
    });
</script>
```