Step 3: Set the AccessToken and Configure the rest of the form

Main Configuration

Now you are ready to render the hosted fields form on your website. Start by setting the Hosted Fields Token, which you've obtained from your backend together with the payment amount. After that, you must specify all hosted fields containers together with the payment amount.

Keep in mind that the fields object property names must be exactly as shown above: cardNumber, cardExpiration, cardCvv, cardHolderName, submit

Setting Shipping data

StartFragment

In case your Hosted Fields Token is issued with 3DS Param set to true and your customer provides an AMEX (American Express) Card you will be required to provide shipping data. You will also be informed for this via an event called hostedFields.shippingRequired which will occur when the customer enters his card. You can provide the shipping data in two ways:

During initial form creation via the shipping property of the configuration object, see the example above.

Using the setShippingInfo method on the form instance:

form.setShippingInfo({
  address1: 'Example Address Line #1',
  country: 'US',
  city: 'Chicago',
  state: 'Illinois',
  zip: '60639'
})

You can use this method together with the hostedFields.shippingRequired event. When receiving this event you might want to explicitly check if the shippingRequired flag is set to true on the event object. In case the user provides an AmEx card you will receive the event with flag equal to true, but if he changes the card to a non-AmEx card you will receive the event with flag equal to false.

form.addEventListener('hostedFields.shippingRequired', e => {
  if(e.detai.shippingRequred) {
    form.setShippingInfo({
      address1: 'Hello world',
      country: 'US',
      city: 'Hello city',
      state: 'Illinois',
      zip: '40005'
   })
  }
})

The shipping object has the following structure:

Field	Data	Type	Required
shipping.address1	Shipping Address	string	Yes
shipping.country	Shipping Country. You can use full country name or ISO2/ISO3 Code	string	Yes
shipping.city	City	string	Yes
shipping.state	State. Required when country is US	string	Mixed
shipping.zip	ZIP	string	Yes

For the 3DS Integration the shipping data is synonymous to the billing data. In case you collect and represent it as billing information in your app, it's still the same for your hosted fields integration. Just provide that billing data as shipping using the setShippingInfo or during the initialization with the correct object structure

Step 3: Set the AccessToken and Configure the rest of the form

Main Configuration#

Main Configuration