This page defines the av-payment-method-credit-card web component. The component renders a fully validated form for adding a credit card as a payment method.

Events

The events that can be generated by the av-payment-method-credit-card component are defined in the sections below.

`submit`

Generated when the form is submitted.

`success`

Generated when the credit card is successfully added. The payload of this event contains the payment method record. It does not include the card number.

`error`

Generated when the credit card cannot be added due to static validation failure or invalid card info. The payload contains the error object returned by the server or the static validation.

Attributes

The sections below define the attributes that you can use to create and display the form.

`data-azp`*

The application identifier used to associate the authentication token with this application.
* Required

`data-token`

If av-payment-method-credit-card is the only component on the page and you are not using the av-token component, then use the data-token attribute to provide a valid JWT token that grants the appropriate permissions.

The av-payment-method-credit-card component requires a token with the following role and scope:

role - customer
scope - payment_methods:create

Props

`data-primary-color`

Using a hex color code this prop will change the button colors

data-primary-color="#a6bf59"

`data-border-radius`

This is a property in CSS used to define the curvature or roundedness of the corners of an element, such as a div or a button. It’s often used to create visually appealing designs and soften the sharp edges of elements.

data-border-radius="20px"

`data-submit-label`

This value will define the call to action on the button at the bottom of the form. The default value, if it is not defined, will be "Submit".

data-submit-label="Apply Card"

`data-demo-mode`

This property activates demo mode. When set to true, the form will be automatically populated with demonstration data, and all input fields will be disabled, rendering it suitable for illustrative purposes.

data-demo-mode="true"

`data-partial-fill-mode`

This property enables partial fill mode, wherein only billing address fields are pre-populated and made editable. When set to true, it will pre-fill address fields and enable real-time validation during user input.

data-partial-fill-mode="true"

`data-card-number`

This property pre-fills the card number field with the specified value. Its primary utility is within demo mode for showcasing example card data.

data-card-number="4111-2134-0707-2111"

`data-cvv`

This property pre-fills the CVV field with the specified value. Its primary utility is within demo mode for showcasing example card data.

data-cvv="456"

`data-expiration`

This property pre-fills the card expiration field with the specified value in MM/YY format. Its primary utility is within demo mode for showcasing example card data.

data-expiration="11/35"

`data-street-address`

This property pre-fills the billing street address field with the specified value. It is utilized in demo mode, partial fill mode, and billing address mode.

data-street-address="432 Park Ave"

`data-city`

This property pre-fills the billing city field with the specified value. It is utilized in demo mode, partial fill mode, and billing address mode.

data-city="Manhattan"

`data-state`

This property pre-fills the billing state/region field with the specified value. It is utilized in demo mode, partial fill mode, and billing address mode.

data-state="NY"

`data-country`

This property pre-fills the billing country field with the specified value. It is utilized in demo mode, partial fill mode, and billing address mode.

data-country="US"

`data-postal-code`

This property pre-fills the billing postal/zip code field with the specified value. It is utilized in demo mode, partial fill mode, and billing address mode.

data-postal-code="10022"

`data-billing-address-mode`

This property enables billing address mode, where address fields are pre-populated and their editability is governed by dataBillingAddressEditable. When set to true, the component will pre-fill address fields based on the provided address properties.

data-billing-address-mode="false"

`data-billing-address-editable`

This property controls whether pre-filled billing address fields are editable. When set to false in billing address mode, fields containing existing values will be disabled. If undefined, fields will remain editable.

data-billing-address-editable="false"

`data-hide-billing-address`

When set to true, this property completely conceals the entire billing address section (street, city, state, country, postal code) from the form.

data-hide-billing-address="false"

`data-hide-name-field`

When set to true, this property completely conceals the cardholder name input field from the form.

data-hide-name-field="false"

`data-input-padding`

This value sets the CSS padding property for input and submit button, adding extra space inside them around the text to improve appearance and readability.

data-input-padding="1.5rem"

`data-input-spacing`

This value sets the CSS margin property, adding extra space to the top and bottom of the cardholder name input and submit button.

data-input-spacing="1.25rem"

`data-input-no-border`

This value controls whether a border is applied to the input field by setting the appropriate CSS property.

data-input-no-border=true

`data-input-background-color`

This value sets the CSS background-color property for the input and submit button to improve their appearance.

Example values:
input-background-color="gray"
input-background-color="rgba(211, 211, 211, 1)"
input-background-color="%23999999" (Note: # must be replaced by %23 in URLs)

`data-input-text-color`

This value sets the CSS color property for the text inside the input field and submit button, including any icons within the input. It helps enhance the overall appearance.

Example values:
input-text-color="green"
input-text-color="rgba(211, 211, 211, 1)"
input-text-color="%23999999" (Note: replace # with %23 in URLs)

Props that works only with v2-model

`data-use-v2-model`

When set to true, this property instructs the component to utilize the V2 API model for the creation of payment methods. This impacts the structure of the payload transmitted to the API, employing the newer V2 format with nested traits and address objects in lieu of flat properties.

data-use-v2-model="true"

`data-merchant-id`

This property sets the merchant ID that will be incorporated into the x-avid header during API requests. This is employed for merchant identification within the V2 API model.

data-merchant-id="df08143d-59ac-4f0e-8eb9-f29534fecd9c"

`data-customer-ref`

This property sets the customer reference that will be incorporated into the x-ref header during API requests. This is employed for customer identification within the V2 API model.

data-customer-ref="customer-ref"

`data-intent`

This property sets the intent value that will be incorporated into the x-intent header during API requests. This is employed to specify the purpose or intent of the payment method creation within the V2 API model.

data-intent="intent"

Methods

The av-payment-method-credit-card component supports the following methods:

submit() - Allows the parent components to submit the form when the submit button is hidden.
clear() - Allows the element that called the method to clear all values that have been entered in all of the fields.

Examples

The examples below show typical implementations of the av-payment-method-credit-card component.

AV-Token Component Example

The example below shows how to create a form by providing the JWT token using the API call:

<script src="https://cdn.authvia.com/web-components/av-payment-method-credit-card/latest.js"></script>
<av-payment-method-credit-card
    id="avcc"
    data-token="{JSON_WEB_TOKEN}"
    data-azp="{APPLICATION_ID}"/>
<script>
	document.getElementById('avcc').addEventListener('success', (paymentMethod) => console.log("Payment method",{paymentMethod}))
	</script>

Auto-submit Example

The example below shows how to hide the submit button and add a method that submits the form as the result of a separate operation:

<script src="https://cdn.authvia.com/web-components/av-payment-method-credit-card/latest.js"></script>     	
<av-payment-method-credit-card
    id="avcc"
    data-azp="{APPLICATION_ID}"
    data-token="{JSON_WEB_TOKEN}"
    data-hide="['submit']"/>
	
<script>
	const ccform = document.getElementById('avcc')
	ccform.addEventListener('success', (paymentMethod) => console.log("Payment method",{paymentMethod}))
	ccform.submit();
</script>