Tokenization Form

The Tokenization Form securely captures the customer’s credit or debit card information and converts sensitive data into a token. The token can then be used to process transactions without storing card information directly on the merchant’s systems.

This form is used when a customer makes an online purchase, and their card information must be securely captured for payment processing. Instead of directly storing the card data, this form generates a token that can be sent to the merchant’s server to complete the purchase process.

Importing the JavaScript Library

To integrate the Tokenization Form into your website, it’s necessary to include a script that points to the form’s URL. This allows access to the BambooForm object containing the methods needed to render Bamboo forms.

//STAGE - Test Environment:
<script src="https://capture.stage.bamboopayment.com"></script>

//PRODUCTION:
<script src="https://capture.bamboopayment.com"></script>

renderTokenizationForm Method

Once the Script pointing to Bamboo forms is imported, you’ll have access to the renderTokenizationForm method that renders the Tokenization Form in your application, allowing your users to securely enter their cards.

BambooForm.renderTokenizationForm(configuration);

Tokenization Form

Request Example

<script> 
BambooForm.renderTokenizationForm({
  containerId: 'MERCHANT_PAGE_CONTAINER_ID',
  metadata: {
    publicKey: 'MERCHANT_PUBLIC_KEY',
    targetCountryISO: 'UY',
    customer: {
      email: 'cliente@example.com',
      cardHolderName: 'Juan Pérez'
    },
    locale: 'es',
    logoUrl: '<https://mieshop.com/logo.png>'
  },
  hooks: {
    onOperationSuccess: (token) => {
      console.log('Token received:', token);
    },
    onOperationError: (error) => {
      console.error('Error:', error);
    }
  }
});
</script>

Configuration Parameters

ParameterTypeMandatory?Description
containerIdstringYesHTML container ID where the form will be displayed.
metadataobjectYesConfigures information related to the customer and transaction.
hooksobjectYesCallback functions to handle form events.

Customize your Tokenization Form | metadata object

You can customize the tokenization form with your logo and preferred language, besides pre-fill data already provided by your customer, or restrict the tokenization to specific cards.

ParameterTypeMandatory?Description
metadatapublicKeystringYesMerchant’s public key, necessary for secure tokenization.
metadatatargetCountryISOstringYesISO code of the country where the transaction will be processed.
metadatacustomerobjectNoCustomer information.
metadatalocalestringNoForm language, using ISO code Spanish: ’es’ (default) English: ’en'
metadatalogoUrlstringNoURL of the logo that will appear on the form. If not defined, it’s shown without a logo in the header
metadatafiltersobjectNoAllows restricting the card entered by the user to a specific issuing bank or card type

Customer Information

ParameterTypeMandatory?Description
metadatacustomeruniqueIdstringNoUnique customer identifier. Indicates if a single-use or recurring Token is generated Token Types
metadatacustomeremailstringNoCustomer’s email. It’s pre-loaded in the form and allows editing if there are syntax errors that prevent token generation
metadatacustomercardHolderNamestringNoCardholder’s name. It’s pre-loaded in the form without editing option.

Tokenization restricted to specific Cards

ParameterTypeMandatory?Description
metadatafilterspaymentMediaTypenumberNoIdentifier of the payment method type (credit card, debit card, etc.). (See payment methods)
metadatafiltersissuerBanknumberNoIssuing bank identifier. (See banks)

Manage your customer interaction | hooks object

ParameterTypeMandatory?Description
hooksonOperationSuccessfunctionYesCallback executed upon successful tokenization. Receives the token as a parameter.
hooksonOperationFinalizefunctionNoOptional callback executed when the operation is finalized.
hooksonOperationErrorfunctionNoOptional callback that handles errors during tokenization.
hooksonApplicationLoadedfunctionNoCallback executed when the form has been loaded correctly.

Tokenization Form Details

Successful tokenization | Token object

The token object is returned in the onOperationSuccess hook executed upon successful tokenization and contains the following parameters.

PropertyTypeDescription
TokenIdstringToken identifier.
CreatedtimestampToken creation date and time.
TypestringToken type, possible values: OneTime, Commerce
BrandstringCard brand or payment method used.
IssuerBankstringCard Issuing Bank.
OwnerstringCardholder’s name.
Binnumeric[6]Card identifier.
Last4numeric[4]Last four digits of the card.
CardTypestringPayment method or card type, possible values: CreditCard, DebitCard, PhysicalNetwork, PrePaid
CardExpMonthnumeric[2]Card expiration month.
CardExpYearnumeric[2]Card expiration year.

CVV Form

The CVV Form is specifically designed to capture the Card Verification Value (CVV) found on the back of the physical card. This form is used when it’s necessary to validate a transaction with the CVV, generally in recurring payments or purchases where the card information has already been previously tokenized.

Typical use: When a customer has previously stored their credit card through the tokenization process but is asked to enter their CVV to validate or complete a transaction, providing an additional layer of security.

Method renderCVVForm

Once you’ve imported the script that points to the Bamboo forms, you’ll have access to the renderCVVForm method, which renders a form dedicated exclusively to capturing the customer’s CVV.

BambooForm.renderCVVForm(url, configurationCVV);

CVV Form

Configuration Parameters

ParameterTypeMandatory?Description
urlstringYesThe URL containing the session data and the customer’s payment profile information. Includes key, session_id, paymentProfileId, brand, and the last four digits of the card. This URL is received as a response when attempting to execute a purchase if CVV verification is required.
containerIdstringYesID of the HTML container where the form will be displayed.
metadataobjectYesConfigures information related to the session and the transaction.
logoUrlstringNoURL of the logo that will appear on the form.
localestringNoLanguage of the form, using an ISO locale code.
hooksobjectYesCallback functions to handle form events.
hooksonOperationSuccessfunctionYesCallback executed upon successful CVV validation. Receives the token as a parameter.
hooksonOperationFinalizefunctionNoOptional callback executed when the operation is finalized.
hooksonOperationErrorfunctionNoOptional callback that handles errors during CVV validation.
hooksonApplicationLoadedfunctionNoCallback executed when the form has been loaded correctly.

Usage Example

<script>
BambooForm.renderCVVForm(
  '<https://api.stage.bamboopayment.com/v1/Capture/?key=FEdJ84hzdIKBY0gyC7-NDG_I56ONV7HQ&session_id=CA_51864eaf-1603-4fe8-8720-ae8c569ea702&paymentProfileId=375108&brand=MasterCard&lastFour=4008>',
  {
    metadata: {
      locale: 'es',
      logoUrl: '<http://www.example.com/>'
    },
    hooks: {
      onOperationSuccess: () => {
        console.log('Operation successful');
      },
      onOperationError: (error) => {
        console.error('Error in CVV validation:', error);
      }
    }
  }
);
</script>
footer
Last modified November 18, 2024

© Bamboo | All rights reserved 2024