NAV navbar
payske
javascript typescript

Introduction

Payske.js reference

Looking for a step-by-step guide?

Learn to accept a payment or use the Payment Request Button.
Need to upgrade?

If you are currently using Payske.js v2 to collect card information, check out our migration guide to learn how to switch.
Not a developer?

Use apps from our partners to get started with Payske and to do more with your Payske account—no code required.

This reference documents every object and method available in Payske’s browser-side JavaScript library, Payske.js. Use our React Payske.js reference if you want to add Elements to your React based app.

You can use Payske.js’ APIs to tokenize customer information, collect sensitive payment details using customizable Payske Elements, and accept payments with browser payment APIs like Apple Pay and the Payment Request API.

Including Payske.js

<script src="https://js.payske.com/v3/"></script>

Include the Payske.js script on each page of your site—it should always be loaded directly from https://js.payske.com, rather than included in a bundle or hosted yourself.

To best leverage Payske’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Payske to detect suspicious behavior that may be indicative of fraud as customers browse your website.

Using Payske.js as a module

We also provide an npm package that makes it easier to load and use Payske.js as a module. For more information, check out the project on GitHub.

Asynchronous and deferred loading of Payske.js

Asynchronous loading of JavaScript is generally recommended, as it can improve the user experience of your site by not blocking DOM rendering during script loading. The easiest way to asynchronously load Payske.js is to use the npm module as described above. It does asynchronous loading by default.

You can also load Payske.js using the async or defer attribute on the script tag. Note, however, that with asynchronous loading any API calls will have to be made only after the script execution has finished.

Was this section helpful? Yes No

Initializing Payske.js

Payske(publishableKey,options?)

var payske = Payske('pk_test_TYooMQauvdEDq54NiTphI7jx');
const payske = Payske('pk_test_TYooMQauvdEDq54NiTphI7jx');

Use Payske(publishableKey, options?) to create an instance of the Payske object. The Payske object is your entrypoint to the rest of the Payske.js SDK.

Your Payske publishable API key is required when calling this function, as it identifies your website to Payske.

We've prefilled the example with a sample test API key. To create a Payske object using your account, replace the sample API key with your actual API key or sign in.

When you’re ready to accept live payments, replace the test key with your live key in production. Learn more about how API keys work in test mode and live mode.

Method parameters

Was this section helpful? Yes No

TOKENS AND SOURCES

Create Token

payske.createToken(Element,data?)

Create token from card

payske.createToken(cardElement).then(function(result) {
  // Handle result.error or result.token
});
Create token from card

const {token, error} = await payske.createToken(cardElement);

Element:

Use payske.createToken to convert information collected by card elements into a single-use Token that you safely pass to your server to use in an API call.

Method parameters

Returns

payske.createToken returns a Promise which resolves with a result object. This object has either:

Was this section helpful? Yes No

Create a Source from Element

payske.createSource(element,sourceData)

Create a Source

payske
  .createSource(ibanElement, {
    type: 'sepa_debit',
    currency: 'eur',
    owner: {
      name: 'Jenny Rosen',
    },
  })
  .then(function(result) {
    // Handle result.error or result.source
  });
Create a Source

const {source, error} = await payske.createSource(
  ibanElement,
  {
    type: 'sepa_debit',
    currency: 'eur',
    owner: {
      name: 'Jenny Rosen',
    },
  },
);

Use payske.createSource to convert payment information collected by elements into a Source object that you safely pass to your server to use in an API call. See the Sources documentation for more information about sources.

Method parameters

Returns

This method returns a Promise which resolves with a result object. This object has either:

Was this section helpful? Yes No

Create a Source from data

payske.createSource(sourceData)

Create a Source from data


payske
  .createSource({
    type: 'ideal',
    amount: 1099,
    currency: 'eur',
    owner: {
      name: 'Jenny Rosen',
    },
    redirect: {
      return_url: 'https://shop.example.com/crtA6B28E1',
    },
  })
  .then(function(result) {
    // Handle result.error or result.source
  });
Create a Source from data

const {source, error} = await payske.createSource({
  type: 'ideal',
  amount: 1099,
  currency: 'eur',
  owner: {
    name: 'Jenny Rosen',
  },
  redirect: {
    return_url: 'https://shop.example.com/crtA6B28E1',
  },
});

Use payske.createSource to convert raw payment information into a Source object that you can safely pass to your server for use in an API call. See the Sources documentation for more information about sources.

Method parameters

Returns

This method returns a Promise which resolves with a result object. This object has either:

You cannot pass raw card information to payske.createSource(sourceData). Instead, you must gather card information in an Element and use payske.createSource(element, sourceData). You can also pass an existing card token to convert it into a Source object.

Was this section helpful? Yes No

Retrieve a Source

payske.retrieveSource(source)

Retrieve a Source

payske
  .retrieveSource({
    id: '{SOURCE_ID}',
    client_secret: '{SOURCE_CLIENT_SECRET}',
  })
  .then(function(result) {
    // Handle result.error or result.source
  });
Retrieve a Source

const {source, error} = await payske.retrieveSource({
  id: '{{SOURCE_ID}}',
  client_secret: '{{SOURCE_CLIENT_SECRET}}',
});

Retrieve a Source using its unique ID and client secret.

Method parameters

Returns

This method returns a Promise which resolves with a result object. This object has either:

Was this section helpful? Yes No

.

THE ELEMENTS OBJECT

Payske Elements are customizable UI components used to collect sensitive information in your payment forms.

Use an Elements instance to create and manage a group of individual Element instances.

Create an Elements

payske.elements(options?)

Create an Elements instance

var elements = payske.elements({
  clientSecret: 'CLIENT_SECRET',
});
Create an Elements instance


const elements = payske.elements({
  clientSecret: 'CLIENT_SECRET',
});

This method creates an Elements instance, which manages a group of elements.

Method parameters

Was this section helpful?YesNo

Update Elements

Update Elements

elements.update({locale: 'fr'});
Update Elements

elements.update({locale: 'fr'});

elements.update(options)

This method updates options on an existing instance of Elements. Note that not all options (e.g. fonts) are updatable.

Method parameters

Was this section helpful?YesNo

THE ELEMENT

Use Element instances to collect sensitive information in your checkout flow.

The Payment Element

The Payment Element is an embeddable component for securely collecting payment details. The Payment Element supports dozens of payment methods with a single integration.

Create the Payment Element

elements.create('payment',options?)

Create a Payment Element

var paymentElement = elements.create('payment');
Create a Payment Element

const paymentElement = elements.create('payment');

This method creates an instance of the Payment Element.

Method parameters

with customized fields

Create a Payment Element with customized fields

// Customize which fields are collected by the Payment Element
var paymentElement = elements.create('payment', {
  fields: {
    billingDetails: {
      name: 'never',
      email: 'never',
    }
  }
});

// If you disable collecting fields in the Payment Element, you
// must pass equivalent data when calling `payske.confirmPayment`.
form.addEventListener('submit', async (event) => {
  payske.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://example.com',
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
          email: 'jenny.rosen@example.com',
        }
      },
    },
  })
  .then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error.
    }
  });
});
Create a Payment Element with customized fields

// Customize which fields are collected by the Payment Element
const paymentElement = elements.create('payment', {
  fields: {
    billingDetails: {
      name: 'never',
      email: 'never',
    }
  }
});

// If you disable collecting fields in the Payment Element, you
// must pass equivalent data when calling `payske.confirmPayment`.
const handleSubmit = async () => {
  const {error} = await payske.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://example.com/return',
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
          email: 'jenny.rosen@example.com',
        }
      },
    },
  });
     // Other actions ...
};

Option parameter

Get a Payment Element

elements.getElement('payment')

Get a Payment Element

const paymentElement = elements.getElement('payment');
Get a Payment Element

var paymentElement = elements.getElement('payment');

This method retrieve a previously created Payment Element.

Method parameters

Returns

elements.getElement('payment') returns one of the following:

Was this section helpful?YesNo

Update a Payment Element

element.update(options)

Update a Payment Element

// Update a Payment Element after creation
var paymentElement = elements.getElement('payment');
paymentElement.update({business: {name: 'Payske Shop'}});
Update a Payment Element

// Update a Payment Element after creation
const paymentElement = elements.getElement('payment');
paymentElement.update({business: {name: 'Payske Shop'}});

Updates the options the Payment Element was initialized with. Updates are merged into the existing configuration.

Method parameters

Was this section helpful?Yes No

The Card Element

Payske also offers a set of Elements for individual payment methods that you can use in your payment flows.

Create a card Element

elements.create('card',options?)

Create a card Element

var cardElement = elements.create('card');
Create a card Element

const cardElement = elements.create('card');

This method creates an instance of an individual Element.

It takes the type of Element to create as well as an options object.

Method parameters

Was this section helpful?YesNo

Get an Element

elements.getElement(type)

Get an Element

var cardElement = elements.getElement('card');
Get an Element

const cardElement = elements.getElement('card');

This method looks up a previously created Element by its type.

Method parameters

Returns

elements.getElement returns one of the following:

Was this section helpful?YesNo

Update a card element

card.update(options)

Update a card element

// Update an element with details collected elsewhere on your page
var myPostalCodeField = document.querySelector('input[name="my-postal-code"]');
myPostalCodeField.addEventListener('change', function(event) {
  cardElement.update({value: {postalCode: event.target.value}});
});

// Dynamically change the styles of an element
window.addEventListener('resize', function(event) {
  if (window.innerWidth <= 320) {
    cardElement.update({style: {base: {fontSize: '13px'}}});
  } else {
    cardElement.update({style: {base: {fontSize: '16px'}}});
  }
});
Update a card element

// Update an element with details collected elsewhere on your page
const myPostalCodeField = document.querySelector(
  'input[name="my-postal-code"]',
);
myPostalCodeField.addEventListener('change', ({target}) => {
  cardElement.update({value: {postalCode: target.value}});
});

// Dynamically change the styles of an element
window.addEventListener('resize', (event) => {
  if (window.innerWidth <= 320) {
    cardElement.update({style: {base: {fontSize: '13px'}}});
  } else {
    cardElement.update({style: {base: {fontSize: '16px'}}});
  }
});

Updates the options the Element was initialized with. Updates are merged into the existing configuration.

If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use element.update with the appropriate information.

The styles of an Element can be dynamically changed using element.update. This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.

Method parameters

Was this section helpful?YesNo

Style the Element container

The Element container

<style>
  .my-input {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>
<form>
  <div>
    <label>Name</label>
    <input class="my-input">
  </div>
  <div>
    <label>Card</label>
    <!-- Using the same "my-input" class on the -->
    <!-- regular input above and on this container. -->
    <div class="my-input" id="card-element"></div>
  </div>
</form>

Style the container you mount an Element to as if it were an <input> on your page. For example, to control padding and border on an Element, set these properties on the container. This is usually done by re-using the classes that you have applied to your DOM <input> elements. After the Element is mounted, the .PayskeElement class is added to the container. Additionally, the following classes are automatically added to the container when the Element is complete, empty, focused, invalid, or autofilled by the browser:

These class names can be customized using the classes option when you create an Element.

Was this section helpful?YesNo

Mount an Element

element.mount(domElement)

Mount an Element

<!-- Mount the instance within a <label> -->
<label>Card
  <div id="card-element"></div>
</label>

<!--
  Or create a <label> with a 'for' attribute,
  referencing the ID of your container.
-->
<label for="card-element">Card</label>
<div id="card-element"></div>

<script>
  cardElement.mount('#card-element');
</script>

The element.mount method attaches your Element to the DOM. element.mount accepts either a CSS Selector (e.g., '#card-element') or a DOM element.

You need to create a container DOM element to mount an Element. If the container DOM element has a label, the Element is automatically focused when its label is clicked. There are two ways to do this:

  1. Mount the instance within a <label>.
  2. Create a <label> with a for attribute, referencing the ID of your container.

Method parameters

Was this section helpful?Yes No

Element events

The only way to communicate with your Element is by listening to an event. An Element might emit any of the events below. All events have a payload object that has an elementType property with the type of the Element that emitted the event.

Change event

Payment Element:-

paymentElement.on('change',handler)

Handle a payment element change event

paymentElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  }
});

Handle a payment element change event

paymentElement.on('change', (event) => {
  if (event.complete) {
    // enable payment button
  }
});
Handler event object

    {
      elementType: 'payment',
      complete: false,
      empty: false,
      collapsed: false,
      value: { type: "card" },
    }

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

Was this section helpful?YesNo

Card Element:-

cardElement.on('change',handler)

Handle a card change event


cardElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});

Handle a card change event


cardElement.on('change', (event) => {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});

Handler event object

    {
      complete: false,
      brand: 'visa',
      elementType: 'card',
      empty: false,
      error: undefined,
      value: { postalCode: "" },
    }

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

Was this section helpful?YesNo

Card Number Element:-

cardNumberElement.on('change',handler)

Handle a cardNumber change event


cardNumberElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});

Handle a cardNumber change event


cardNumberElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});
Handler event object

    {
      complete: true,
      brand: 'visa',
      elementType: 'cardNumber',
      empty: false,
      error: undefined,
    }

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

Was this section helpful?YesNo

Card Expiry Element:-

cardExpiryElement.on('change',handler)

Handle a cardExpiry change event


cardExpiryElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});

Handle a cardExpiry change event


cardExpiryElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});

Handler event object

    {
      complete: true,
      elementType: 'cardExpiry',
      empty: false,
      error: undefined,
    }

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

Was this section helpful?YesNo

Card Cvc Element:-

cardCvcElement.on('change',handler)

Handle a cardCvc change event


cardCvcElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});

Handle a cardCvc change event


cardCvcElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});

Handler event object

    {
      complete: true,
      elementType: 'cardCvc',
      empty: false,
      error: undefined,
    }

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

Was this section helpful?YesNo

Ready Event

element.on('ready',handler)

Handle an Element ready event


element.on('ready', function(event) {
  // Handle ready event
});

Handle an Element ready event


element.on('ready', (event) => {
  // Handle ready event
});

Triggered when the Element is fully rendered and can accept element.focus calls.

Method parameters

Was this section helpful?YesNo

Focus event

element.on('focus',handler)

Handle an Element focus event


element.on('focus', function(event) {
  // Handle focus event
});

Handle an Element focus event


element.on('focus', (event) => {
  // Handle focus event
});

Triggered when the Element gains focus.

Method parameters

Was this section helpful?YesNo

Blur event

element.on('blur',handler)

Handle an Element blur event

element.on('blur', function(event) {
  // Handle blur event
});

Handle an Element blur event

element.on('blur', (event) => {
  // Handle blur event
});

Triggered when the Element loses focus.

Method parameters

Was this section helpful?YesNo

Escape event

element.on('escape',handler)

Handle an Element escape event

element.on('escape', function(event) {
  // Handle escape event
});

Handle an Element escape event

element.on('escape', (event) => {
  // Handle escape event
});

Triggered when the escape key is pressed within an Element.

Method parameters

Was this section helpful?YesNo

Click event

element.on('click',handler)

Handle an Element click event

paymentRequestButtonElement.on('click', function(event) {
  // Handle click event
});

Handle an Element click event

paymentRequestButtonElement.on('click', (event) => {
  // Handle click event
});

Triggered when the Element is clicked.

This event is only emmited from a paymentRequestButton and issuingCardCopyButton Element.

Method parameters

Was this section helpful?YesNo

Input validation

Display validation errors from an Element


cardElement.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

Display validation errors from an Element


cardElement.on('change', ({error}) => {
  const displayError = document.getElementById('payment-errors');
  if (error) {
    displayError.textContent = error.message;
  }
});

Payske elements validate customer input as it is typed. To help your customers catch mistakes, listen to change events on an Element and display any errors.

Postal code formatting

The card element automatically determines your customer’s billing address country based on their card number. Using this information, the postal code field validation reflects whether that country uses numeric or alphanumeric-formatted postal codes, or if the country uses postal codes at all. For instance, if a U.S. card is entered, the postal code field only accepts a five-digit numeric value. If it’s a UK card, an alphanumeric value can be provided instead.

Many of our test cards have a U.S. billing address country. When using these to test your payment form, you must also use a five-digit U.S. ZIP code (e.g., 12345). To test elements with other postal code formats, use our international test card numbers.

Was this section helpful?YesNo

.

CHECKOUT

Payske Checkout is the quickest way to start accepting payments on Payske. Send your customers to pay on Payske’s conversion-optimized page instead of building your own.

Redirect to Checkout

payske.redirectToCheckout(options?)

Redirect to Checkout

// Call your backend to create the Checkout Session
fetch('/create-checkout-session', {
  method: 'POST',
})
.then(function(response) {
  return response.json();
})
.then(function(session) {
  return payske.redirectToCheckout({ sessionId: session.id });
})
.then(function(result) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, you should display the localized error message to your
  // customer using `error.message`.
  if (result.error) {
    alert(result.error.message);
  }
});
Redirect to Checkout

// Call your backend to create the Checkout Session
const response = await fetch('/create-checkout-session', { method: 'POST' });
const session = await response.json();

// When the customer clicks on the button, redirect them to Checkout.
const result = await payske.redirectToCheckout({
  sessionId: session.id,
});

if (result.error) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
}

Use payske.redirectToCheckout to redirect your customers to Checkout, a Payske-hosted page to securely collect payment information. When the customer completes their purchase, they are redirected back to your website.

Method parameters

Returns

This method returns a Promise which resolves with a result object. If this method fails, the result object will contain a localized error message in the error.message field.

If you are currently on a beta of the new version of Checkout, read the Beta Migration Guide to upgrade to the latest version.

Was this section helpful? Yes No

.

PAYMENT INTENTS

Accept global payments online with the Payment Intents APIs. For step-by-step instructions on using the Payment Intents APIs, see the accept a payment guide.

The following Payske.js methods are available to use as part of your integration.

Was this section helpful?YesNo

Confirm a PaymentIntent

payske.confirmPayment(options)

Confirm a payment intent



payske.confirmPayment({
  elements,
  confirmParams: {
    // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
    return_url: 'https://example.com',
  },
})
.then(function(result) {
  if (result.error)
  // Inform the customer that there was an error.
});

Confirm a payment intent



const {error} = await payske.confirmPayment(
  {
    elements,
    confirmParams: {
      // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
      return_url: 'https://example.com',
    },
  }
);

Use payske.confirmPayment to confirm a PaymentIntent using data collected by the Payment Element. When called, payske.confirmPayment will attempt to complete any required actions, such as authenticating your user by displaying a 3DS dialog or redirecting them to a bank authorization page. Your user will be redirected to the return_url you pass once the confirmation is complete.

Method parameters

Returns

payske.confirmPayment will return a Promise. Upon a successful confirmation, your user will be redirected to the return_url you provide before the Promise ever resolves.

If the confirmation fails, the Promise will resolve with an {error} object that describes the failure. When the error type is card_error or validation_error, you can display the error message in error.message directly to your user.

Note that for some payment methods such as iDEAL or Afterpay Clearpay, your user will first be redirected to an intermediate page to authorize the payment. If they fail to authorize the payment, they will be redirected back to your return_url and the PaymentIntent will have a status of requires_payment_method. In this case you should attempt to recollect payment from the user.

Note that payske.confirmPayment may take several seconds to complete. During that time, you should disable your form from being resubmitted and show a waiting indicator like a spinner. If you receive an error result, you should be sure to show that error to the customer, re-enable the form, and hide the waiting indicator.

Was this section helpful?YesNo

Confirm by payment method

Below are a number of methods used to confirm a PaymentIntent for a specific payment method type.

Confirm a card payment

payske.confirmCardPayment(clientSecret,data?,options?)

Confirm a card payment


payske
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Confirm a card payment


const {paymentIntent, error} = await payske.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  },
);

Use payske.confirmCardPayment when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide and carry out 3DS or other next actions if they are required.

If you are using Dynamic 3D Secure, payske.confirmCardPayment will trigger your Radar rules to execute and may open a dialog for your customer to authenticate their payment.

When you confirm a PaymentIntent, it needs to have an attached PaymentMethod. In addition to confirming the PaymentIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data. These use cases are detailed in the sections that follow.

Method parameters

Returns

payske.confirmCardPayment will return a Promise which resolves with a result object. This object has either:

Note that payske.confirmCardPayment may take several seconds to complete. During that time, you should disable your form from being resubmitted and show a waiting indicator like a spinner. If you receive an error result, you should be sure to show that error to the customer, re-enable the form, and hide the waiting indicator.

Additionally, payske.confirmCardPayment may trigger a 3D Secure authentication challenge. This will be shown in a modal dialog and may be confusing for customers using assistive technologies like screen readers. You should make your form accessible by ensuring that success or error messages are clearly read out after this method completes.

-with data from an Element

Confirm a card payment with payment data from an Element

Confirm with an Element


payske
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Confirm with an Element


const {paymentIntent, error} = await payske.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  },
);

Use payske.confirmCardPayment with payment data from an Element by passing a card or cardNumber Element as payment_method[card] in the data argument.

The new PaymentMethod will be created with data collected by the Element and will be used to confirm the PaymentIntent.

Data argument properties

-with an existing payment method

Confirm a card payment with an existing payment method

Confirm with existing payment method


payske
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: '{PAYMENT_METHOD_ID}',
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Confirm with existing payment method


const {paymentIntent, error} = await payske.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  },
);

Use payske.confirmCardPayment with an existing PaymentMethod by passing its id to payment_method. The PaymentMethod will be used to confirm the PaymentIntent.

Data argument properties

-with an existing token

Confirm a card payment with an existing token

Confirm with existing token


payske
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card: {
        token: 'tok_visa',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Confirm with existing token


const {paymentIntent, error} = await payske.confirmCardSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: {
        token: 'tok_visa',
      },
    },
  },
);

For backwards compatibility, you can convert an existing Token into a PaymentMethod with payske.confirmCardPayment by passing the Token to payment_method[card][token]. The newly created PaymentMethod will be used to confirm the PaymentIntent.

Data argument properties

-with an attached PaymentMethod

Confirm a card payment with an attached PaymentMethod

Confirm with an attached PaymentMethod


payske
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}')
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });

Confirm with an attached PaymentMethod


const {paymentIntent, error} = await payske.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

If you have already attached a PaymentMethod to this PaymentIntent, then you can confirm the PaymentIntent using payske.confirmCardPayment without passing in any additional data.

Retrieve a PaymentIntent

payske.retrievePaymentIntent(clientSecret)

Retrieve a PaymentIntent


payske
  .retrievePaymentIntent('{PAYMENT_INTENT_CLIENT_SECRET}')
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Retrieve a PaymentIntent


const {paymentIntent, error} = await payske.retrievePaymentIntent(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

// Handle error or paymentIntent

Retrieve a PaymentIntent using its client secret.

Method parameters

Returns

This method returns a Promise which resolves with a result object. This object has either:

Was this section helpful?YesNo

Handle a card action

payske.handleCardAction(clientSecret)

Handle a card action


payske
  .handleCardAction('{PAYMENT_INTENT_CLIENT_SECRET}')
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
Handle a card action


const {paymentIntent, error} = await payske.handleCardAction(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
);

// Handle the paymentIntent or error

Use payske.handleCardAction in the Payment Intents API manual confirmation flow to handle a PaymentIntent with the requires_action status. It will throw an error if the PaymentIntent has a different status.

Method parameters

Returns

This method returns a Promise which resolves with a result object. This object has either:

Note that payske.handleCardAction may take several seconds to complete. During that time, you should disable your form from being resubmitted and show a waiting indicator like a spinner. If you receive an error result, you should be sure to show that error to the customer, re-enable the form, and hide the waiting indicator.

Additionally, payske.handleCardAction may trigger a 3D Secure authentication challenge. The authentication challenge requires a context switch that can be hard to follow on a screen-reader. Ensure that your form is accessible by ensuring that success or error messages are clearly read out.

Was this section helpful?YesNo

APPENDIX

The CssFontSource object

Example CssFontSource object

    {
      cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans'
    }

This object is used to pass custom fonts via a stylesheet URL when creating an Elements object.

Object Properties

Was this section helpful?YesNo

The CustomFontSource object

Example CustomFontSource object

    {
      family: 'Avenir',
      src: 'url(https://my-domain.com/assets/avenir.woff)',
      weight: '500',
    }

This object is used to pass custom fonts when creating an Elements object.

Object Properties

Was this section helpful?YesNo

The PaymentItem object

Example PaymentItem object

    {
      amount: 2000,
      label: 'A soft cotton shirt',
    }

The PaymentItem object is used to configure a PaymentRequest.

Object Properties

Was this section helpful?YesNo

The PaymentResponse object

Example PaymentResponse object

    {
      source: {
        id: "src_1FlM3yDbZnUGiCm0P8eqjAuI",
        object: "source",
        // ...
      }
      complete: function(status) {
        // Call this when you have processed the source data provided
        // by the API. Note that you must must call complete within 30
        // seconds.
      },
      payerName: 'Jenny Rosen',
      payerEmail: 'jenny@example.com',
      walletName: 'browserCard',
      shippingOption: {
        id: 'basic',
        label: 'Ground shipping',
        detail: 'Ground shipping via UPS or FedEx',
        amount: 995,
      }
    }

This object is returned as the payload of the PaymentRequest object's token, paymentmethod, or source event handlers.

Object Properties

Was this section helpful?YesNo

The ShippingOption object

Example ShippingOption object

    {
      id: 'basic',
      label: 'Ground shipping',
      detail: 'Ground shipping via UPS or FedEx',
      amount: 995,
    }

The ShippingOption object describes a shipping method used with a PaymentRequest.

Object Properties

Was this section helpful?YesNo

The ShippingAddress object

Example ShippingAddress object

    {
      recipient: 'Jenny Rosen',
      addressLine: ['185 Berry St.'],
      city: 'San Francisco',
      region: 'CA',
      postalCode: '94941',
      country: 'US',
    }

The ShippingAddress object describes a shipping address collected with a PaymentRequest.

Object Properties

Was this section helpful?YesNo

The Style object

Creating a styled element


var element = elements.create('card', {
  style: {
    base: {
      iconColor: '#c4f0ff',
      color: '#fff',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#fce883',
      },
      '::placeholder': {
        color: '#87BBFD',
      },
    },
    invalid: {
      iconColor: '#FFC7EE',
      color: '#FFC7EE',
    },
  },
});
Creating a styled element


    const element = elements.create('card', {
      style: {
        base: {
          iconColor: '#c4f0ff',
          color: '#fff',
          fontWeight: '500',
          fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
          fontSize: '16px',
          fontSmoothing: 'antialiased',
          ':-webkit-autofill': {
            color: '#fce883',
          },
          '::placeholder': {
            color: '#87BBFD',
          },
        },
        invalid: {
          iconColor: '#FFC7EE',
          color: '#FFC7EE',
        },
      },
    });

Elements are styled using a Style object, which consists of CSS properties nested under objects for any of the following variants:

The following pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant:

The following CSS properties are supported:

Object Properties

Was this section helpful?YesNo

The UpdateDetails object

Example UpdateDetails object

    {
      status: 'success',
      total: {
        amount: 15000,
        label: 'A soft cotton shirt',
      },
    }

This object is passed to the updateWith callback on a PaymentRequest's shippingaddresschange and shippingoptionchange events.

Object Properties

Was this section helpful?YesNo

Supported browsers

Payske.js strives to support all recent versions of major browsers. For the sake of security and providing the best experience to the majority of customers, we do not support browsers that are no longer receiving security updates and represent a small minority of traffic.

If you have an issue with Payske.js on a specific browser, please contact us so we can improve its support.

Payske.js to end support for Internet Explorer 11

Starting on February 28, 2022, Payske.js will no longer support IE11. On that date, we will no longer test Payske.js, Checkout, and Elements in IE11, and will start to ship changes that will break in that browser.

Additionally, any new Elements launched leading up to this date, such as the Payment Element, will not work in IE11.

Was this section helpful?YesNo

Supported locales

Create a Payske instance with a locale


var payske = Payske('pk_test_TYooMQauvdEDq54NiTphI7jx', {
  locale: 'fr'
});
Create a Payske instance with a locale


const payske = Payske('pk_test_TYooMQauvdEDq54NiTphI7jx', {
  locale: 'fr'
});

The following subset of IETF language tags can be used to configure localization in Payske.js.

Note that Checkout supports a slightly different set of locales than Payske.js. If you are using Checkout with payske.redirectToCheckout, make sure to use a locale that Checkout supports.

Value Locale Elements Checkout
auto Payske detects the locale of the browser ✔ ✔
ar Arabic ✔
bg Bulgarian (Bulgaria) ✔ ✔
cs Czech (Czech Republic) ✔ ✔
da Danish (Denmark) ✔ ✔
de German (Germany) ✔ ✔
el Greek (Greece) ✔ ✔
en English ✔ ✔
en-GB English (United Kingdom) ✔ ✔
es Spanish (Spain) ✔ ✔
es-419 Spanish (Latin America) ✔ ✔
et Estonian (Estonia) ✔ ✔
fi Finnish (Finland) ✔ ✔
fil Filipino (Philipines) ✔ ✔
fr French (France) ✔ ✔
fr-CA French (Canada) ✔ ✔
he Hebrew (Israel) ✔
hr Croatian (Croatia) ✔ ✔
hu Hungarian (Hungary) ✔ ✔
id Indonesian (Indonesia) ✔ ✔
it Italian (Italy) ✔ ✔
ja Japanese (Japan) ✔ ✔
ko Korean (Korea) ✔ ✔
lt Lithuanian (Lithuania) ✔ ✔
lv Latvian (Latvia) ✔ ✔
ms Malay (Malaysia) ✔ ✔
mt Maltese (Malta) ✔ ✔
nb Norwegian Bokmål ✔ ✔
nl Dutch (Netherlands) ✔ ✔
pl Polish (Poland) ✔ ✔
pt-BR Portuguese (Brazil) ✔ ✔
pt Portuguese (Brazil) ✔ ✔
ro Romanian (Romania) ✔ ✔
ru Russian (Russia) ✔ ✔
sk Slovak (Slovakia) ✔ ✔
sl Slovenian (Slovenia) ✔ ✔
sv Swedish (Sweden) ✔ ✔
th Thai (Thailand) ✔ ✔
tr Turkish (Turkey) ✔ ✔
vi Vietnamese (Vietnam) ✔ ✔
zh Chinese Simplified (China) ✔ ✔
zh-HK Chinese Traditional (Hong Kong) ✔ ✔
zh-TW Chinese Traditional (Taiwan) ✔ ✔

Was this section helpful?YesNo

Cookies

Payske uses cookies to ensure that the site works properly, detect and prevent fraud, and understand how people interact with Payske. There are some cookies that are essential for Payske to function properly. These Necessary Cookies provide secure access to the site and enable page navigation. Other categories of cookies include Advertising Cookies, Analytics Cookies, and Preference Cookies.

You can find more information in the Payske Cookies Policy, including how to opt-out or manage your cookie preferences.

Was this section helpful?YesNo

Viewport meta tag requirements

Example viewport meta tag

    <meta name="viewport" content="width=device-width, initial-scale=1" />

In order to provide a great user experience for 3D Secure on all devices, you should set your page's viewport width to device-width with the the viewport meta tag.

There are several other viewport settings, and you can configure those based on your needs. Just make sure you include width=device-width somewhere in your configuration.

Was this section helpful?YesNo

javascript typescript