GuidesAPI ReferenceSupport

# Overview

Payment Method Tokenization allows you to accept credit card or bank account payments on your website while limiting your PCI compliance burden. It achieves this by transmitting payment information directly from the payer's web browser to PaySimple servers without ever passing through your servers.

Payment data such as card number, expiration date and CVV will all be associated with a one-time use (nonce) `payment_method_token`. The `payment_method_token` can be submitted via a [Payments API](🔗) to create a new [sale transaction](🔗), or to [vault](🔗) the card or bank account for use making future payments. The token is valid for 15 minutes from creation.

PMT supports key-entered cards, swiped cards via the IdTech encrypted swiper, and bank accounts. To switch between the entry modes, trigger the [setMode event](🔗).

## Initialization

The following is the minimum amount of code to be able to use PMT:


### Initialization Properties
PropertyTypeDescription
**container**HTML Element**Required** The HTML element that the PMT iframe will be attached to
**merchantKey**string**Required** Identifies you with PaySimple, not a secret. Can be retrieved via [Get Merchant](🔗). Also returned in `merchant_activated_for_payment_type` [webhook](🔗)
**showPlaceholders**booleanIndicates whether to show the placeholders in the inputs (default: true)
**acceptInternationalPostalCodes**booleanIndicates whether to accept international postal codes
**singleColumnLayoutBreakpoint**numberIndicates a custom breakpoint (in pixels) for form column layout (default: 768)
**styles**Styles objectAllows you to customize the look and feel of PMT
**localization**Localization objectAllows you to customize the labels, placeholders and validation messages
#### Styles Object
The Styles object allows you to customize the look and feel of PMT.
Any valid CSS property is allowed. CSS properties can be in kebab-case (must be wrapped in quotation marks) or camelCase.

#### Localization Object
The Localization object allows you to customize the labels, placeholders and validation messages.

## Destroy
The PMT object can be destroyed at runtime using the _destroy()_ function exposed on the object the _window.paymentMethodTokenization(...)_ call returns. A contrived example of using this function is found below:

Calling _destroy()_ removes the DOM element and other resources created when PMT is initialized. A call to _window.paymentMethodTokenization(...)_ will create a new PMT object to be used after the previous one has been destroyed. It's up to the developer implementing the PMT integration to manage PMT objects created and destroyed at runtime in this way.
## Events
### Triggering Events
Events are triggered via:

The following events can be triggered:
Event NameInputDescription
**setMode(_mode_)**stringChanges the PMT mode (valid modes: 'cc-input', 'cc-swiper', 'ach-input')
**submitForm()**
Submits the form
**setFormToSubmitted()**
Set form to submitted, meaning validation messages will be displayed
**resetForm()**
Resets the form
### Handling Events
Events are handled via:

The following events can be handled:
Event NameMessage TypeDescription
**add-payment-method-succeeded**AddPaymentMethodSucceededMessageTriggered when a payment method has been added successfully
**add-payment-method-failed**AddPaymentMethodFailedMessageTriggered when adding a payment method has failed
**validity-changed**ValidityChangedMessageTriggered when the validity of the form has changed (useful when you want to disable your submit button until the form is valid)
#### AddPaymentMethodSucceededMessage

#### AddPaymentMethodFailedMessage

#### ValidityChangedMessage