Sandbox

YouCan Pay Sandbox offers an easy way for developers to test YouCan Pay in their test environment.

Note: When trying to switch to the sandbox mode, you need to always use the sandbox keys that you can find on the settings page, which have the following format: pub_sandbox_xxx and pri_sandbox_xxx.

Set up YouCan Pay Sandbox

The sandbox mode in YouCan Pay is an option that can be enabled by setting isSandbox: true in the JavaScript integration constructor options.

Code

<script src="https://youcanpay.com/js/ycpay.js"></script>

<div id="error-container"></div>
<div id="payment-container"></div>
<button id="pay">Pay</button>

<script type="text/javascript">
  const ycPay = new YCPay('pub_sandbox_key', {
      formContainer: '#payment-container',
      locale: 'en',
      isSandbox: true,
      errorContainer: '#error-container',
  });
</script>

Sandbox Backend Integration

On the backend side, after installing our SDK, you need to indicate that you want to use the sandbox mode by using the setIsSandboxMode static method. You can then use the following snippet in order to generate a token for a certain transaction, or view a specific transaction by providing the transaction ID, just like the live mode.

Congrats, now you can use the sandbox mode of YouCan Pay!

Code

composer require youcanpay/payment-sdk

// setting the sandbox mode
YouCanPay::setIsSandboxMode(true)

$youCanPay = YouCanPay::instance()->useKeys('my-sandbox-private-key', 'my-sandbox-public-key');

// generate a token for a new payment
$token = $youCanPay->token->create("order-id", "2000", "USD", "123.123.123.123");
var_dump($token->getToken(), $token->getRedirectURL());

// get details of a transaction
$transaction = $youCanPay->transaction->get('transaction-id');
var_dump($transaction->getAmount(), $transaction->getCurrency());

Testing and Test Cards

After the integration, the payment form will be rendered in the specified div element with a Test Mode badge to indicate being in the sandbox mode.

If the card used is protected by 3DS, a confirmation will pop up, which simulates the 3DS verification process that will be shown to the customer in the live mode.

You can use the test cards below in sandbox mode.

Test Cards

Card	CVV	Date	Behaviour
4242 4242 4242 4242	112	10/24	No 3DS - Success
4000 0000 0000 3220	112	10/24	3DS - Success
4000 0084 0000 1629	112	10/24	3DS - Card Rejected
4000 0000 0000 0077	112	10/24	No 3DS - No Funds

Code

<script src="https://youcanpay.com/js/ycpay.js"></script>

<div id="error-container"></div>
<div id="payment-container"></div>
<button id="pay">Pay</button>

<script type="text/javascript">
  const ycPay = new YCPay('pub_sandbox_key', {
      formContainer: '#payment-container',
      locale: 'en',
      isSandbox: true,
      errorContainer: '#error-container',
  });

  // render the form
  ycPay.renderCreditCardForm();

  // start the payment on button click
  document.getElementById('pay').addEventListener('click', function() {
    // execute the payment
    ycPay.pay(tokenId)
      .then(successCallback)
      .catch(errorCallback);
  })

  function successCallback(response) {
    // your code here
  }

  function errorCallback(response) {
    // your code here
  }
</script>